JqPlot 1.0 How to create line chart with date axis AND a legend
10,061
You should add :
series: [
{ label: 'Toronto' },
{ label: 'New York' }
]
This is the complete code:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
var line1 = [['2008-06-30', 4], ['2008-7-14', 6.5], ['2008-7-28', 5.7], ['2008-8-11', 9], ['2008-8-25', 8.2]];
var line2 = [['2008-06-30', 8], ['2008-7-14', 5], ['2008-7-28', 7], ['2008-8-11', 2], ['2008-8-25', 2]];
var plot2 = $.jqplot('conteneur', [line1, line2], {
title: 'Customized Date Axis',
seriesDefaults: {
rendererOptions: {
//////
// Turn on line smoothing. By default, a constrained cubic spline
// interpolation algorithm is used which will not overshoot or
// undershoot any data points.
//////
smooth: true
}
},
legend: { show: true },
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickOptions: { formatString: '%b %#d, %#I %p' },
min: 'June 16, 2008',
tickInterval: '1 month'
}
},
series: [{ lineWidth: 4,
markerOptions: { style: 'square' }
}],
series: [
{ label: 'Toronto' },
{ label: 'New York' }
],
});
});
Author by
m4dd
Updated on June 06, 2022Comments
-
m4dd almost 2 years
first of all, thanks in advance for your answers.
Here is my problem. I have a linear chart with JqPlot that I need to show the legend, but I don't know how to change the series name. How do we do that?
Here is my code.
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <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.dateAxisRenderer.min.js"></script> <link rel="stylesheet" type="text/css" href="jquery.jqplot.css" /> <script type="text/javascript" language="javascript"> $(document).ready(function(){ var line1=[['2008-06-30',4], ['2008-7-14',6.5], ['2008-7-28',5.7], ['2008-8-11',9], ['2008-8-25',8.2]]; var line2=[['2008-06-30',8], ['2008-7-14',5], ['2008-7-28',7], ['2008-8-11',2], ['2008-8-25',2]]; var plot2 = $.jqplot('conteneur', [line1,line2], { title:'Customized Date Axis', seriesDefaults: { rendererOptions: { ////// // Turn on line smoothing. By default, a constrained cubic spline // interpolation algorithm is used which will not overshoot or // undershoot any data points. ////// smooth: true } }, legend:{ show: true } , axes:{ xaxis:{ renderer:$.jqplot.DateAxisRenderer, tickOptions:{formatString:'%b %#d, %#I %p'}, min:'June 16, 2008', tickInterval:'1 month' } }, series:[{lineWidth:4, markerOptions:{style:'square'}}] }); }); </script> </head> <body> <div id="conteneur"></div> </body> </html>
What I really want to do is, in the legend the "Series 1" and "Series 2" are called by their series name (ex.: "Cleveland" and "Toronto"). But where should I put it in the code?
Thanks.