I have been using jqPlot for a project I am in and so far I am quite satisfied with it. Is very complete. However, the feature I am working on right now requires an horizontal bar chart. My issue is that my chart currently shows xaxis ticks as decimal numbers increasing by 0.5. I don't need decimal values. I need integers increasing by 1. My config is a little something like this:
var chartConfig = {
seriesDefaults: {
showMarker: false,
shadowAngle: 135,
pointLabels: {
show: true,
labelsFromSeries: true,
seriesLabelIndex: 2,
edgeTolerance: -50
},
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barWidth: 25,
barPadding: 0,
barDirection: 'horizontal'
}
},
axes: {
xaxis: {
min: 0,
max: 4,
tickInterval: 1
},
yaxis: {
showTicks: true,
renderer: $.jqplot.CategoryAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -50,
labelPosition: 'middle'
}
}
}
};
However, looks like jqPlot is completely ignoring the xaxis tickInterval, min and max option values. My output chart looks as follows:
I need to know what I am doing bad here. My config looks to be okay, but I can't get jqPlot to use the values I pass for the X axis. Any help on this matter will be very much appreciated.
Thanks.
I have been having problem with the tickInterval on horizontal bars also. I found that you have to specify both the min and max along with the tick interval for the axis you need it for.
This you have done but I wanted to state this somewhere as I spent a long time trying to find why tick interval wasn't working and this post kept coming up in my searches so hopefully it will help others.
For your issue, is possibly something to do with your data sets.
If this is still causing you problems maybe post the full script with your values as the code is only partial atm.
Thanks
Richard
Related
Image - 1
dates are displayed on the x-axis, values are displayed on the y-axis.
How can I change the interval distance?
You should look at the documentation of chartjs and specifically linear axis:
chartjs documentation
Code Example:
JsFiddle Example
xAxes: [{
type: 'time',
ticks: {
autoSkip: true,
maxTicksLimit: 20
}
}]
Your question is not elaborate enough. Atleast you should have given sample json for the chartjs via which you are plotting. From my understanding this should work :
xAxis: {
ticks: {
maxTicksLimit: 10
}
}
I've got a working not stacked logarithmic horizontal bar chart .I need a copy of this chart where the X and Y-axis-es are stacked(both at the same time).The problem comes when I change the axises to stacked ,than the bars goes off canvas and the values don't fit the grid.(https://i.imgur.com/LH6YTy0.png) - The picture shows the values and the grid at the bottom shows that the datas not fitting the grid values - Is that a bug or am I overlooking something?
The code is a simple a chart declaration, there are 4 datasets I'm working with right now, each looks like this:
{label: "D_number_data", data: Array(11), fill: false, backgroundColor: "#80B300", borderColor: "#80B300", …}
I think nothing is wrong with the datasets or the way I assign them to the chart,so something must be with the stacked axis-es.
I've tried resizing and changing only one Axis to be stacked,which is also working, but the reason I need both axis to be stacked is that in that way they are not overlapping each other so it's easier to look at it and read the data.
let myChart = new Chart(ctx2, {
type: 'horizontalBar',
data: {
labels: [],
datasets: [],
},
options: {
labels:'50px',
borderWidth:1,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked:true,
barPercentage: 1,
ticks:{
autoSkip: false,
pointLabelFontSize: '20px'
},
}],
yAxes: [{
stacked: true,
barPercentage: 0.4,
ticks:{
fontColor: 'rgb(0, 0, 0)'},
fontSize:500,
}],
}
}
});
The expected result would be the values fit the values in the grid and the bars stays on canvas.
Found the problem, in my project the data in the dataset object was a string array (something like["1","2","3"]). After parseInt the elements in the data array , the stacked logarythmic bar chart work fine. Funny thing that I created many chart-s with string data arrays using chart.js, and I only encountered this issue in chart-s where the type was set to logarithmic, and both axis set to stacked.
I have created a dynamic bar graph using jqplot, the problem is that some values are quite big i.e. 10000000 and others are pretty small i.e. 2000 or 10000. Because of this range issue, i am only able to see the bigger valued graphs while the rest dont even appear up or appear as just a line on the axis.
Could someone please let me know how this range issue could be solved?
Following my comment, and your need to achieve a solution which includes jqplot bar chart, i'll suggest illustrating the massive difference of values by adding a second line graph to the plot.
$(document).ready(function(){
var data = [10000000, 5000000,10000,2000];
var options= {
title: 'Bar and Line Chart',
series:[{
renderer: $.jqplot.BarRenderer,
rendererOptions: {
barMargin: 5,
fillToZero: true
},
pointLabels: {
show: true,
seriesLabelIndex:1,
hideZeros:false
}
}],
axes: {
xaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
renderer: $.jqplot.CategoryAxisRenderer,
},
yaxis: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
padMin: 0,
pad: 1.1,
label: ' logarithmic scale',
rendererOptions: { forceTickAt0: true}
}
},
};
$.jqplot('graph', [data,data], options );
});
Here is a working solution in jsfiddle
I'm trying to make a Highcharts polar chart, see this fiddle: http://jsfiddle.net/mgwf23me/
yAxis: {
min: 0,
max: 11,
labels: {
enabled: false
}
},
The problem is that the yAxis max seems to go by steps of 5. With max on 11, the rendered max step is 15.
How do I change this behaviour to be steps of 1?
This is due to endOnTick being true. From the max API description:
If the endOnTick option is true, the max value might be rounded up.
Set this to false, and the axis should have the correct height.
You may also want to adjust the ticks to make the lines show up appropriately. This can be done in a number of ways, using tickPositions, tickPositioner, tickInterval...
My simple suggestion is to do it like this (JSFiddle):
yAxis: {
min: 0,
max: 11,
endOnTick: false, // For axis height
tickPositions: [0,11], // For grid lines
labels: {
enabled: false
}
}
I have an application that needs to plot at least over 5k data points and the size can nearly be limitless.
The plot goes:
X-Axis -> DateTime
Y-Axis -> Temperature
This is my current plot
var plot1 = $.jqplot('chartdiv', dataArray, {
title: 'Default Date Axis',
axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } },
series: [{ lineWidth: 4, markerOptions: { style: 'square' } }],
numberTicks: 10
});
with data array containing at least 5k points in the ['Date', 'Temperature'] format.
The problem with this is that it'x extremely inefficient and makes the browser freeze up. I don't need it to literally put a label on every datapoint, maybe a few. Can anyone give me tips on how to optimize this?
You can get better performance by changing your marker types and removing shadows. I've been using these options in my plots with pretty good success:
seriesDefaults: {
lineWidth: 1, shadow: false,
rendererOptions: { smooth: false },
markerOptions: { show: true, shadow: false, size: 2 }
}
Here's an example which adds 50k points to a jqplot: http://jsfiddle.net/xf8d36kc/
We have a project where we are consistently plotting 20-30k points fairly quickly. Once we start getting towards around 100k points it's still quick to display but zooming and interacting with the plot starts to have lag times of 1-3 seconds but still doesn't freeze up the browser. We experience more delay in bringing the data in from our database then actual draw time for jqplot.
I haven't looked much in to plotting sets much bigger than 100k, but after that you may want to start grouping the data serverside to limit the number of points and then expand them as you zoom in for more detail.
If working with Primefaces 5, do this:
<p:chart id="lineChart" type="line" model="#{managedBean.lineModel}" />
<h:outputScript>
function chartExtender() {
// this = chart widget instance
// this.cfg = options
this.cfg.seriesDefaults = {
lineWidth: 2, shadow: false,
rendererOptions: { varyBarColor: true, smooth: false },
markerOptions: { show: true, shadow: false }
};
}
</h:outputScript>
On Managedbean:
LineChartModel lineModel = new LineChartModel();
//...
lineModel.setExtender("chartExtender");
//...
Greatly improved the performance for me.
Others options here.