JqPlot 1.0 How to create line chart with date axis AND a legend

date, jqplot, jquery, legend

Solution

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' }
        ],
    });
});

Problem

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.

Original source