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.
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 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 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.
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.
I set the font size of tab_labels bigger in default theme,so i edit the theme package like this
{
"class": "tab_label",
"fg": [0, 0, 0, 255],
"shadow_color": [255, 255, 255, 80],
"shadow_offset": [0, 1],
"font.italic": false,
"font.size": 17.0 <---what i insert
},
but unfortunately I can only see the half part of the characters in labels now(only upper part because font seems too big)
(so sorry I dont have enough rep to post image),how can I fix that problem.
Unfortunately this isn't possible as far as I know of.
You can set the tab_height to a larger value, but it still cuts off the text:
http://wes.io/Qzm0/content
There is a thread about this on the sublime forum:
http://www.sublimetext.com/forum/viewtopic.php?f=3&t=8889