I am using jqplot for showing graph.
following is the code :
tempArr1 = [9189.539999999999, 10170.039999999999, 980.5]
plot2 = $.jqplot('bar_chart_id1', [tempArr1], {
title:{
text: chatTitle2,
textColor: '#B66B09'
},
seriesDefaults:{
renderer:$.jqplot.BarRenderer,
rendererOptions: {
// Set the varyBarColor option to true to use different colors for each bar.
varyBarColor: true,
barPadding: 2,
barMargin: 3,
barWidth: 30,
},
pointLabels: {show: true},
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: lblArray,
label:'Manufacturer',
},
yaxis:{
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
min: 0,
tickInterval:1000,
label:'Amount',
tickOptions: {formatString: '$%#.2f'}
}
},
highlighter: { show: true },
});
As you can see the point label is showing many decimal points (9189.539999999999).
I need to show the label as '$91890.54'.
I have tried the formatString option in pointLabels as '$%#.2' buts its not working.
Any help is greatly appreciated.
Thank you.
tempArr1 = [9189.539999999999, 10170.039999999999, 980.5];
tempArr1 = tempArr1.map(i => { return parseFloat(i.toFixed(2)); });
Round to at most 2 decimal places in JavaScript
Math.round(num * 100) / 100
Source
pointLabels: { show: true, location: 'n', lables: tempArr1 , formatString: "$%#.2f" },
Should meet your exact needs
Related
I've a little problem with jQplot. I'm trying to do a DateAxisRenderer like this :
http://tinyurl.com/p8v5coh
And i've this :
http://tinyurl.com/qd2lbxh
I don't want to make a rotation on my test. I just want to input a line break between my hour and my date.
There is my code :
var plot1 = $.jqplot('chart1', [test2], {
title:'Plot to test JQPLOT',
legend: {
show: true,
placement: 'outsideGrid'
},
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 0,
fontSize: '10pt'
}
},
axes: {
xaxis: {
label: "X Axis",
renderer:$.jqplot.DateAxisRenderer,
tickOptions: {
formatString: '%H %#.2f %n %#.2f %#d-%#m-%Y',
},
//min:'June 16, 2008 8:00AM',
tickInterval:'14400000',
},
yaxis: {
label: "Y Axis",
renderer: $.jqplot.LogAxisRenderer,
tickOptions: {
angle: 0
}
}
},
highlighter: {
show: true,
sizeAdjust: 20,
},
cursor:{
show: true,
zoom: true,
showTooltip:false
},
series:[{showMarker:false}],
});
As you can see, i've tried '%n' as it's write in the [official doc][1].
I think it's idiot, but I can't solve this problem myself. The line break doesn't work.
Can you show me the right way?
Ty
jqplot.com/docs/files/plugins/jqplot-dateAxisRenderer-js.html
jqplot sometimes does strange things with axes and labels. That's why I usually manually define my own axes ticks like this:
axes: {
xaxis: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
label: 'Date',
tickOptions:{formatString:'%b %Y'},
pad: 0,
ticks: lsTicks,
renderer: $.jqplot.DateAxisRenderer
},
where lsTicks looks lomething like this:
["2014-01", "2014-02", "2014-03", "2014-04"]
and its length is the same as your data. To make things more readable, you can add tickOptions: {angle: -20},, so that your dates come in at an angle if you have too many to fit next to each other.
tickOptions:{formatString:'%b %Y'} says: display a 3 letter month, then a 4 digit year. For more options and info, see here.
Alternatively, you can use min, max and tickInterval, but I have found that they misbehave sometimes. See here and here for more.
Please have a look at this jsfiddle example.
series: [{
yaxis: 'yaxis',
tickOptions: {
showGridline: true
}
}, {
yaxis: 'y3axis',
tickOptions: {
showGridline: true
}
}, {
yaxis: 'yaxis',
tickOptions: {
showGridline: true
}
}]
There are no gridlines against y3axis' ticks.
And also this example,
series: [{
yaxis: 'y3axis',
tickOptions: {
showGridline: true
}
}, {
yaxis: 'y3axis',
tickOptions: {
showGridline: true
}
}, {
yaxis: 'y3axis',
tickOptions: {
showGridline: true
}
}]
There are no gridlines at all if all the series are plotted against y3axis. The same is true for y4axis.
Can someone help me with how I can make the gridlines appear for y3axis as well?
You are getting this issue because you are using the 'y3axis' before you have used 'y2axis'. In your 1st jsFiddle change 'y3axis' to 'y2axis' (i.e. yaxis: 'y2axis') and you will then see all the grid lines. Similarly, if you change 'y3axis' to 'yaxis' in your second jsFiddle you will again see all the gridlines.
As the y-values vary greatly between you data sets, why not render your graph so all three y-axes are clearly discernable on screen as follows? :
See this jsfiddle for how I did this.
The jqPlot code used to render this chart is:
var plot1 = $.jqplot('chart1', [line1, line2, line3], {
title:'Plot with 3 Y-Axes',
series:[
{},
{yaxis:'y2axis'},
{yaxis:'y3axis'}
],
axesDefaults:{useSeriesColor: true},
axes:{
xaxis:{min:0, max:7, numberTicks: 8},
yaxis:{min:0, max:60, label: 'line1'},
y2axis:{
min:2000,
max:70000,
tickOptions: { showGridline: false }, label: 'line2'
},
y3axis:{ label: 'line3'}
},
highlighter: {
show: true,
sizeAdjust: 1
}
});
Also not how I've used the highlighter option so it's easy to see the x and y values for a point when a user hovers over a plotted point.
See here for another approach you could take which would make use of jqPlots zoom facility.
this is my first question.
I need to format a jqPlot chart point labels like this: 50 (100%)
Formating number and show percentage.
var s1 = [32, 28, 18, 6];
var ticks = ['0-20 kph', '21-40 kph', '41-60 kph', '61+ kph'];
plot1 = $.jqplot('bar-graph', [s1], {
animate: !$.jqplot.use_excanvas,
title: 'Gráficos de velocidade',
captureRightClick: true,
seriesColors: ['green', 'yellow', 'orange', 'red'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
pointLabels: {
show: true,
formatString: '%s (?%%)'
},
rendererOptions: {
varyBarColor: true
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
},
highlighter: {
show: false
}
});
On jsFinddle: http://jsfiddle.net/evandroprogram/r3PUE/10/
Thanks.
You can probably implement a function which returns a proper format string instead of setting the format explicitly. Something like this:
formatString: function(){return '%s (100%)';}()
You can do your calculations inside that function to come up with the appropriate string.
I am using jqplot for a bar graph that has 1 very high number around 7 million and 2 very low numbers, less than 100,000 when they are charted on a bar graph the two low numbers are only a couple of pixels tall, you can barely see them.
I am wondering if it is possible to use disproportionate intervals on the x axis for example the lower half of the chart would be say 0 - 100,000 and then the upper half would go from 100,000 - 7,000,000
I can't find it in the options anywhere, I've set custom 'ticks' but all that does is squeeze all the low numbers into a tiny space at the bottom.
Google is no help.
Here is what I have so far
function init_graph() {
var line1 = [19877, 6643895, $('#inpSalary').val()];
var tickers = ['low number', 'huge number', 'low number'];
plot1 = $.jqplot('jqplot', [line1], {
stackSeries: true,
legend: {
show: true,
location: 'ne'
},
title: 'Data per month stack by user',
seriesColors:['#fcbaac','#f5564d','#1e3045'],
seriesDefaults: {
renderer: $.jqplot.BarRenderer,
rendererOptions: {
varyBarColor: true,
// barPadding: 6,
// barMargin: 15,
barWidth: 60,
highlightMouseOver: true
}
// shadowAngle: 135
},
series: [{
label: 'User1'
}],
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tickers
},
yaxis: {
ticks: [0,20000,30000,40000,50000,60000,70000,80000,90000,100000,7000000],
min: 0
}
}
});
}
You could switch to using the LogAxisRenderer, which by default with give you a log base 10 scale on the y-axis:
<snip>
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: tickers
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
min: 100
}
}
<snip>
I am using below code to show Y axis of jqPlot at right side but its only showing me at left side:
$.jqplot.config.enablePlugins = true;
var test2 = readXML(posi);
plot2 = $.jqplot('chart2', [test2], {
series: [{ renderer: $.jqplot.OHLCRenderer, rendererOptions: { candleStick: true, wickColor: '282828',
upBodyColor: '00C000', fillUpBody: true, downBodyColor: 'F81700',
fillDownBody: true, lineWidth: 1.5, tickLength: true, background: 'C8C8C6',
closeColor: '282828', openColor: '282828'
}
}, { xaxis: 'x2axis', yaxis: 'y2axis'}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: 30
}
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer
},
x2axis: {
renderer: $.jqplot.CategoryAxisRenderer
},
yaxis: {
autoscale: true
},
y2axis: {
autoscale: true
}
}
});
Please tell me where I am where my mistake is.
I have got the code above from the reference: http://www.jqplot.com/tests/canvasAxisTests.php in this the third example is showing values of at right side. I am using candlestick chart of jqPlot.
Thanks
Take a look at the CSS file that comes with the jqplot. It defines the settings for the jqplot-yaxis, and so you can use that for setting the desired location.