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.
Related
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
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.
How can I format y axis ticks strings to be integer and not decimal.
At the moment the tickets are showing with numbers such as 076165412.654666666666 and I would like them to show as 76165412 instead.
var data = [['2013/02/11',20130211],['2013/02/10',20130210],['2013/02/12',20130212],['2013/02/15',20130215],['2013/02/16',71],['2013/02/17',81],['2013/02/18',71],['2013/02/06',735],['2013/02/19',90]];
var options = {
title: 'Monthly statistics for EnrAll',
autoscale:true,
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
min:'Feb 01, 2013',
max:'Feb 20, 2013',
numberTicks: 15,
tickOptions: {
formatString:'%b %#d',
angle: 15
}
},
yaxis: {
label: 'Count',
min:'0'
}
},
highlighter: {
show: true,
tooltipFadeSpeed: 'fast'
}
};
All I did to fix this one was to change the way the minimum y-axis value is specified.
Currently you have min:'0', change it to min:0 (i.e., a number rather than a string). For further insurance you could set tickOptions and force an integer representation, though I didn't need this myself:
tickOptions: {
formatString: '%d'
}
I want to add the plot's legend name to the mouse over tool tip for a series line. I've used one of the solutions to this jqplot tooltip on bar chart.
Specifically I used the following function:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label, x-axis_tick, y-axis value
return plot.series[seriesIndex]["label"] + ", " + plot.data[seriesIndex][pointIndex];
}
However, the problem I have is that it does not use the legend name 'My legend name' instead it will use the JQPlot default of 'Series 1' or 'Series 5' (number depending on series position).
The second problem is that I lose my date formatting once I start using the above function. So I get a number e.g. something like 123672378328 instead of it being converted to the format I specified in tickOptions.
My code to generate the chart is below:
var plot;
function buildChart(chartDivId, graphData, chartTitle, graphSeriesNames, labelNames) {
var id = "#" + chartDivId;
$(id).empty();
var seriesLine = { lineWidth:1, markerOptions: { show:false } };
plot = $.jqplot(chartDivId, graphData,
{
title: chartTitle,
axes:
{
xaxis:
{
label:'Date',
renderer:$.jqplot.DateAxisRenderer,
tickOptions: { formatString:'%b %#d %H:%M' }
},
yaxis: { label: 'Parameter Values', tickOptions: { formatString:'%.2f' }, labelRenderer: $.jqplot.CanvasAxisLabelRenderer, labelOptions : { angle: 270, fontFamily: 'Arial, Verdana, Helvetica', fontSize: '8pt' }, autoscale: true },
},
seriesDefaults: {
markerOptions: {
show: true, style:'filledCircle', size: 4.5
}
},
highlighter:
{
show: true,
sizeAdjust: 7.5,
tooltipContentEditor:tooltipContentEditor //new code added to attempt to add legend name to mouse over tool tip
},
cursor:
{
show: true,
zoom: true,
showTooltip: false
},
legend:
{
labels: labelNames ,
show: true,
location: 's',
renderer: $.jqplot.EnhancedLegendRenderer,
rendererOptions:
{
numberColumns: 10,
numberRows: 5,
seriesToggle: 900,
disableIEFading: false
},
marginTop: '100px',
marginBottom: '100px',
placement: 'outside'
}
}
);
}
FURTHER UPDATE:
After being a bit silly and digging down deep into the plot object of JQPlot I realised that the str variable passed into the tooltipContentEditor method has what I need. So the following is the solution:
function tooltipContentEditor(str, seriesIndex, pointIndex, plot) {
// display series_label with x and y values value
return plot.legend.labels[seriesIndex] + ", " + str;
}
No help or advice provided so I thought I'd provide the solution I found after spending a few hours trying to fix.
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.