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.
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
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.
I'm using some code based on jqplot which draws a barchart and allows toggling the series of the chart by clicking on the legendnames, see function code below.
Is it possible to control the series of various charts by means of only one legend? If so, how?
function drawBarchart(name,ticks,labels,s11,s12,s21,s22){
var plot1 = $.jqplot(name, [s11,s12,s21,s22], { //'chart1' -> define wrapper <div id='chart1'> </div>
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
grid:{borderColor:'transparent',shadow:false,drawBorder:false,shadowColor:'transparent'},
seriesDefaults:{renderer:$.jqplot.BarRenderer, //choose bar chart
rendererOptions: {fillToZero: true},
pointLabels: { show: true, location: 'e', edgeTolerance: -15 } //adds values+labels to bars
},//seriesDefaults
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
series:[ //define labels
{label:labels[0], shadow: false},
{label:labels[1], shadow: false},
{label:labels[2], shadow: false},
],//series
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
legend: {
show: true,
placement: 'outsideGrid',
renderer: $.jqplot.EnhancedLegendRenderer //enables toggling data and legends
},//legend
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks,
tickOptions: {showGridline: false}
},//xaxis
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
showTicks:false,
label: 'axis1',
pad: 1.05,
tickOptions: { showGridline: false}
},//yaxis
y2axis: {
showTicks:false,
label: 'axis2',
pad: 1.05,
tickOptions: {showGridline: false}
}//yaxis
},//axes
series:[
{yaxis:'yaxis', label:'s11[0]'},
{yaxis:'y2axis', label:'s11[1]'},
{yaxis:'yaxis', label:'s12[0]'},
{yaxis:'y2axis', label:'s12[1]'},
{yaxis:'y2axis', label:'s21'},
{yaxis:'y2axis', label:'s22'},
]
}); //$.jqplot('chart1', [s1, s2, s3],
}//barchart
I have done it. here is the implementation on your code Jsfiddle Link
Take into consideration that you have to draw Legends by your self and not by using jqplot.
if you can do that then my code will take care of the rest.
$(document).ready(function () {
var graphObj = [];
var s11 = [["a",1],["b",1],["c",5],["d",2]];
var s12 = [["a",2],["b",2],["c",6],["d",5]];
var s21 = [["a",3],["b",3],["c",7],["d",1]];
var s22 = [["a",4],["b",4],["c",8],["d",8]];
drawBarchart("chart1", s11, s12, s21, s22, 0);
drawBarchart("chart2", s11, s12, s21, s22, 1);
$(".jqplot-table-legend tr").click(function(){
var index = this.rowIndex;
for(var j =0; j<graphObj.length; j++){
graphObj[j].series[index].show = !graphObj[j].series[index].show;
graphObj[j].redraw();
}
});
function drawBarchart(name, s11, s12, s21, s22, i) {
graphObj[i] = $.jqplot(name, [s11, s12, s21, s22], {
// The "seriesDefaults" option is an options object that will
// be applied to all series in the chart.
grid: {
borderColor: 'transparent',
shadow: false,
drawBorder: false,
shadowColor: 'transparent'
},
seriesDefaults: {
renderer: $.jqplot.BarRenderer, //choose bar chart
rendererOptions: {
fillToZero: true
},
pointLabels: {
show: false,
location: 'e',
edgeTolerance: -15
} //adds values+labels to bars
}, //seriesDefaults
// Custom labels for the series are specified with the "label"
// option on the series option. Here a series option object
// is specified for each series.
// Show the legend and put it outside the grid, but inside the
// plot container, shrinking the grid to accomodate the legend.
// A value of "outside" would not shrink the grid and allow
// the legend to overflow the container.
axes: {
// Use a category axis on the x axis and use our custom ticks.
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
tickOptions: {
showGridline: false
}
}, //xaxis
// Pad the y axis just a little so bars can get close to, but
// not touch, the grid boundaries. 1.2 is the default padding.
yaxis: {
showTicks: false,
label: 'axis1',
pad: 1.05,
tickOptions: {
showGridline: false
}
}, //yaxis
y2axis: {
showTicks: false,
label: 'axis2',
pad: 1.05,
tickOptions: {
showGridline: false
}
} //yaxis
}, //axes
series: [{
yaxis: 'yaxis',
label: 's11[0]'
}, {
yaxis: 'y2axis',
label: 's11[1]'
}, {
yaxis: 'yaxis',
label: 's12[0]'
}, {
yaxis: 'y2axis',
label: 's12[1]'
}, {
yaxis: 'y2axis',
label: 's21'
}, {
yaxis: 'y2axis',
label: 's22'
},
]
});
}
});
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.
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.