JQPlot Multi line Chart - Hourly data comparison
Question
I am trying to create a JQ Plot with 2 lines. First line has data from day 1 for each hour and the second line is for day 2 with hourly data. When I create a chart with these 2 lines, I want one line on top of the second to show the hourly data comparison. But I see these two lines next to each other on the chart.
I have the sample here
Please let me know how I can adjust the chart options to display one line on top of the other. Thank you.
Here is my Code:
<html>
<head>
<script src="http://www.jqplot.com/deploy/dist/jquery.min.js"></script>
<script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script>
<script src=""></script>
<link class="include" rel="stylesheet" type="text/css" href="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.css" />
<script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.cursor.min.js"></script>
<script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.logAxisRenderer.min.js"></script>
<script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
line1 = [["6/22/2009 10:00",425.32], ["6/22/2009 11:00",424.84], ["6/22/2009 12:00",417.23], ["6/22/2009 13:00",390],
["6/22/2009 14:00",393.69], ["6/22/2009 15:00",392.24], ["6/22/2009 16:00",369.78], ["6/22/2009 17:00",330.16], ["6/22/2009 18:00",308.57],
["6/22/2009 19:00",346.45], ["6/22/2009 20:00",371.28], ["6/22/2009 21:00",324.7]];
line2 = [["6/23/2009 10:00",325.32], ["6/23/2009 11:00",324.84], ["6/23/2009 12:00",217.23], ["6/23/2009 13:00",190],
["6/23/2009 14:00",593.69], ["6/23/2009 15:00",292.24], ["6/23/2009 16:00",369.78], ["6/23/2009 17:00",330.16], ["6/23/2009 18:00",308.57],
["6/23/2009 19:00",446.45], ["6/23/2009 20:00",241.28], ["6/23/2009 21:00",624.7]];
var plot1 = $.jqplot('chart1', [line1,line2], {
title: 'XYZ, Inc.',
series: [{
label: 'XYZ, Inc.',
neighborThreshold: -1
}],
axes: {
xaxis: {
renderer:$.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30
}
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
tickOptions:{ prefix: '$' }
}
},
cursor:{
show: true,
zoom: true
}
});
});
</script>
</head>
<body>
<div id="chart1" style="height:200px; width:600px;"></div>
</body>
</html>
3 answers
solution1
6 2013-11-26 20:54:35
I struggled with this same problem.
The solution is to define a 2nd x-axis that we'll name x2axis.
Then in your series config, specify that one of your series will use the 2nd x-axis.
var plot1 = $.jqplot('chart1', [line1,line2], {
title: 'XYZ, Inc.',
series: [{
label: 'primary series',
neighborThreshold: -1,
xaxis: 'xaxis'
}, {
label: 'comparative series',
xaxis: 'x2axis'
}],
axes: {
xaxis: {
renderer:$.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30
}
},
x2axis: {
renderer:$.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -30
}
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
tickOptions:{ prefix: '$' }
}
},
cursor:{
show: true,
zoom: true
}
});
Here is a JS Fiddle demonstrating the solution
If your data sets have different lengths, there will be additional problems to solve. Check out my blog post on the topic for more details.
Cheers!
solution2
2 2013-01-03 03:44:54
I don't think it is possible if you are using dateAxisRenderer, a possible solution will be to use a line graph with out dateAxisRenderer
Ex:
line1 = [[10,425.32], [11,424.84], [12,417.23], [13,390], [14,393.69], [15,392.24], [16,369.78], [17,330.16], [18,308.57], [19,346.45], [20,371.28], [21,324.7]];
line2 = [[10,325.32], [11,324.84], [12,217.23], [13,190], [14,593.69], [15,292.24], [16,369.78], [17,330.16], [18,308.57], [19,446.45], [20,241.28], [21,624.7]];
var plot3 = $.jqplot('chart1', [line1, line2 ], {
title: 'XYZ, Inc.',
series: [{
label: 'XYZ, Inc.',
neighborThreshold: -1
}],
axes: {
xaxis: {
min: 1,
max: 24,
tickInterval: 2,
tickOptions:{ suffix: ':00' }
},
yaxis: {
renderer: $.jqplot.LogAxisRenderer,
tickOptions:{ prefix: '$' }
}
},
cursor:{
show: true,
zoom: true
}
});
solution3
2 2013-02-25 11:54:04
It Worked for me.
Example:
var line1=[['2008-06-30 8:00AM',4], ['2008-7-14 8:00AM',6.5], ['2008-7-28 8:00AM',5.7], ['2008-8-11 8:00AM',9], ['2008-8-25 8:00AM',8.2]];
var line2=[['2008-06-30 8:00AM',6], ['2008-7-14 8:00AM',8.5], ['2008-7-28 8:00AM',8.7], ['2008-8-11 8:00AM',12], ['2008-8-25 8:00AM',8.2]];
var plot2 = $.jqplot('chart3', [line1,line2], {
title:'Customized Date Axis',
axes:{
xaxis:{
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{formatString:'%b %#d, %#I %p'},
min:'June 16, 2008 8:00AM',
tickInterval:'2 weeks'
}
},
series:[{lineWidth:4, markerOptions:{style:'square'}}]
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.