I have a piece of code here that should create a line graph consisting of two lines. It will not render the lines and neither the dates on the x-axis. The y-axis is apparently already scaled for the y-values, so the data interpretation went correctly for at least some of the data.
Does anybody see an immediate solution to having the lines displayed as well as the dates along the x-axis?
<html>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript" src="../jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="../plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.css" />
<link rel="stylesheet" type="text/css" href="../jquery.jqplot.min.css" />
<script type="text/javascript">
$(document).ready(function() {
var plot2 = $.jqplot('chart2', [source01, source02], {
title: {
text: 'Validation chart',
show: true
},
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%e-%b-%Y' },
min: "09-01-2008",
max: "06-22-2009",
tickInterval: "6 weeks",
},
y2axis: {
tickOptions: { formatString: '%d' }
}
},
seriesDefaults: {
lineWidth: 1,
markerOptions: { show: false }
}
});
});
source01 = [
['06/15/2009 16:00:00', 136.01],
['06/08/2009 16:00:00', 143.82],
['06/01/2009 16:00:00', 136.47],
['05/26/2009 16:00:00', 124.76],
['05/18/2009 16:00:00', 123.73],
['05/10/2009 16:00:00', 132.03]
];
source02 = [
['06/15/2009 16:00:00', 139.48],
['06/08/2009 16:00:00', 136.97],
['06/01/2009 16:00:00', 144.67],
['05/26/2009 16:00:00', 135.81],
['05/18/2009 16:00:00', 122.5],
['05/10/2009 16:00:00', 130.91]
];
</script>
<div id="chart2" style="width:400px;height:300px; "></div>
</html>
SOLVED: Requires the following additional file to work:
<script type="text/javascript" src="../plugins/jqplot.dateAxisRenderer.min.js"></script>