CODEWITHSUNDEEP
jquerydatejqplotlegend
m4dd
m4dd

Reputation: 89

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

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.

Upvotes: 3

Views: 10115

Answers (1)

Pablo Claus
Pablo Claus

Reputation: 5920

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

Upvotes: 5

Related Questions