I'm using JQPLOT to create graphs. But I have a lot of data for the x-axis. Now, i need to limit the number of ticks. I'm using numberTicks for this but doesn't work.
xaxis: {
numberTicks:15,
max: x_limits.max,
min: x_limits.min,
renderer:$.jqplot.CategoryAxisRenderer,
rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
tickOptions:{formatString:'%#m/%#d/%Y'}
},
I'm using CategoryAxisRenderer. When i use DateAxisRenderer, it works. -.-
EDIT (wrong answer) It doesn't work because it takes account of your minimal and maximal xaxis values. Try to remove them to take into account the "numberTicks" options (or just specify one of them but I'm not sure it will be correct)
EDIT2 : You have to remove the renderer and rendererOptions from the xaxis part :
xaxis:{
//renderer:$.jqplot.CategoryAxisRenderer,
//rendererOptions:{tickRenderer:$.jqplot.CanvasAxisTickRenderer},
max: 40,
min: 1,
numberTicks: 5,
}
Please see a working example here with 5 ticks.
Related
I want to keep value labels outside my amChart graph. The problem is that when value label value is over 9999 then I cant display it's all content.
In this example values should be:
25,000
20,000
15,000
10,000
5,000
First digit is missing. I am dealing with this only by setting panel's margin
"panelsSettings": {
"marginLeft": 40,
"marginRight": 20,
},
Is there any more convienient way to be sure that labels are fitting? hardcoding margin seems to be overkill.
This is my example chart: https://jsfiddle.net/29w35txy/1/
As I mentioned in the comments above, it seems that this issue is depending on the default Browser font.
So it is working in Chrome (left), but does not work in Firefox (right) for me:
Beside that you can prevent this by increasing marginLeft of your panelsSettings which you are already using:
"panelsSettings": {
"marginLeft": 60,
// ...
},
Here I forked you fiddle to show the result.
I'm using jqplot for represent several parameters in series across the time. So I have one Xaxis represent the time and several Yaxes(yaxis, y2axis, y3axis, y4axis, etc.). Each parameter is in different units(temperature, voltage, current, pressure, etc.), so all the Yaxes set to auto for min and max because I dont know what values will come from the server. I'm using ajax request to fill the data and next for real time updating the series with new points.
So now I want for the user to be able to set manual min and max for any Y-axe. So I set by this way:
var axis_name="y2axis";
console.log(plot.axes[axis_name].max);
var new_max=prompt("Please enter max value?");
console.log(new_max);
var plotOptionsEval = "plotOptions = { axes: { "+axis_name+": { max: \""+new_max+"\" } } };";
eval(plotOptionsEval);
console.log(plotOptions);
plot.replot(plotOptions);
console.log(plot.axes[axis_name].max);
So , when I set new max for the first axis(yaxis) everythins is fine.
But when I try to set the max parameter of any other axis - y4axis for example something gone wrong and that max value has a some different value from this the user is entered.
This is a debug from console.log output
50
12
axes: y4axis: {max: "12"}
350
Any ideas?
So I have found a solution if someone asking the same.
The trick is you need to set min and max parameters for all Yaxis in your plot. So I have prepared the min/max axes object with its original values:
var plotOptions = {
axes: {
yaxis: {min: 11.568, max: 11.582}
y2axis: {min: 11.688, max: 11.702}
y3axis: {min: 6.390000000000001, max: 6.53}
y4axis: {min: -300, max: 50}
}
}
Next set the desired Yaxis min/max parameter in the plotOptions object:
var new_max=prompt("Please enter max value?");
plotOptions.axes.y2axis.max=parseFloat(new_max);
and finally replot it:
plot.replot(plotOptions);
I have these two ValueAxes:
{
...
minimum: 0,
maximum: 100,
strictMinMax: true,
autoGridCount: false,
gridCount: 10
},
{
...
minimum: -15,
maximum: 215,
strictMinMax: true,
autoGridCount: false,
gridCount: 10
}
Now the grid lines of both axes are creating a total mess in the chart and its hard to not get confused while trying to read values. The reason for this is, that AmCharts rounds the labels up or down to ten-steps, not respecting the gridCount.
I need to know if there's a way to get AmCharts to stop trying to round the labels. I'm totally fine to have numbers like 62 as a label, as long as it reduces the amount of grid lines.
My workaround is pretty easy.I introduced a new option, so that the normal strictMinMax will still work: strictGridCountI used the implementation of strictMinMax and added these lines just a few lines above the place where strictMinMax is used:
if(_this.strictGridCount) {
if (!isNaN(_this.minimum)) {
_this.min = _this.minimum;
}
if (!isNaN(_this.maximum)) {
_this.max = _this.maximum;
}
_this.step = (_this.max - _this.min) / _this.gridCount;
}
I am showing multiple Meter Gauges on a single page, in conjunction with Bootstrap, to provide responsiveness. What is obvious is they are all calculating slightly different sizes, so I hoped to use diameter.
Here is my working code:
s1 = [322];
$.jqplot('spend',[s1],{
seriesDefaults: {
renderer: $.jqplot.MeterGaugeRenderer,
rendererOptions: {
min: 100,
max: 500,
intervals:[200, 300, 400, 500],
intervalColors:['#66cc66', '#93b75f', '#E7E658', '#cc6666'],
intervalOuterRadius: 56,
ringColor: '#222',
padding: 3,
tickColor: '#111',
ringWidth: 4,
needleThickness: 11,
shadowOffset: 10,
label: "£"
}
},
title: 'Spend'
});
If I add
diameter:200,
I get no output, and:
'this._center.0' is null or not an object jqplot.meterGaugeRenderer.js, line 616 character 13
'this._center.0' is null or not an object jqplot.meterGaugeRenderer.js, line 616 character 13
I have also tried
diameter:50,
and
diameter:500,
in case I was not providing adequate space, or too much space, but I rather doubt it, as intervalOuterRadius is set at 56, I have also assumed that
diameter:200
is correct syntax given that
intervalOuterRadius:56
(as well as various other values) is correct. I cannot find anyone else who has had this problem, and have had no response on the jqplot google group.
Oh yeah, and I'm primarily writing for IE8 atm but it will need to be used on ie11 in time.
I am trying to implement a horizontal bar graph using jqplot library.
In my case, some of the bars of the graph might show extraordinary spike so for example if the 3 bars of my graph have data value of 150(max), the spiked bar might have a data value of 1000.
To accomodate this requirement, I went through the documentation of jqplot and found out that they have something called "breakpoint" to break the axes at some particular place.
http://www.jqplot.com/docs/files/jqplot-linearAxisRenderer-js.html#$.jqplot.LinearAxisRenderer.breakPoints
Now suppose my data for the series looks like this :
[100, 150, 50, 250, 1200, 100]
How in the above case can i make sure that jqplot inserts a breakpoint after 250 and continues the axes ticks at 1200?
[Edited] Ok, so after using the below code I am able to get the breakpoints working:
chart.axes.xaxis.breakPoints=[10,100];
chart.replot();
(i also went through the jqplot source and found out that for breakpoints to work, we need to manually set the ticks, which I did)
But my original problem is still at large!
Suppose my series looks like
[100, 200, 300, 20000]
In this case, even if I use breakpoints, my 3 bars which are of considerably lesser weight seems very tiny as compared to the 4th bar (20000 weight)
this makes the graph unreadable.
Can some one please suggest a way out of this?
"How to implement breakpoints": A replot of data as mentioned above, is not the right way to use breakpoints:
chart.axes.xaxis.breakPoints=[10,100]; chart.replot();
Hava a look on that piece of code, I solved the breakpoint issue:
Having all data values of my barchart < 200 exept of one bar value > 850 i would like to set a breakpoint between 250 and 850.
And here it's how this can be done:
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
},
yaxis: {
ticks: [0,50,100,150,200,250,275,825,850,900,950],
tickOptions: {
formatString: '%.0d'
},
renderer: $.jqplot.LinearAxisRenderer,
rendererOptions: {
breakPoints: [275,825],
breakTickLabel: "≈",
forceTickAt0: true
}
}
Important:
Use the LinearAxisRenderer.
add your ticks manually in an array.
set the breakpoint with the rendererOptions.
The Array with the ticks, HAS TO CONTAIN the values, which you like to set the breakpoints in the rendererOptions.
Regards
Matthias
P.S.: I also have a picture of the graph, but you don't allow me to post images until I get 10 reputations.