Plot multiple series line chart using JSON data - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Plot multiple series line chart using JSON data

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Trend_BL</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="trend_bl" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
var JSON = [{/*from  ww w .j a v  a2  s.  c  om*/
  name: "Maintenance",
  data: [
    ['2017-06-26', 1.5],
    ['2017-07-03', 5.2],
    ['2017-07-10', 1.65],
    ['2017-07-17', 2.5],
    ['2017-07-24', 1.5]
  ]
}, {
  name: "Others",
  data: [
    ['2017-06-26', 1.5],
    ['2017-07-03', 1.5],
    ['2017-07-10', 1.5],
    ['2017-07-17', 1.25],
    ['2017-07-24', 1.5]
  ]
}, {
  name: "Project",
  data: [
    ['2017-06-26', 6.5],
    ['2017-07-03', 6.1],
    ['2017-07-10', 6.7],
    ['2017-07-17', 7],
    ['2017-07-24', 6.5]
  ]
}, {
  name: "Training",
  data: [
    ['2017-06-26', 0],
    ['2017-07-03', 0.75],
    ['2017-07-10', 1.9],
    ['2017-07-17', 0.5],
    ['2017-07-24', 1]
  ]
}, {
  name: "Day-Off",
  data: [
    ['2017-06-26', 0],
    ['2017-07-03', 0],
    ['2017-07-10', 0],
    ['2017-07-17', 0],
    ['2017-07-24', 1]
  ]
}];
//Draw chart
Highcharts.chart('trend_bl', {
  title: {
    text: 'Trend by Business Lines'
  },
  yAxis: {
    title: {
      text: ' Resource Allocation'
    }
  },
  legend: {
    layout: 'vertical',
    align: 'right',
    verticalAlign: 'middle'
  },
  series: JSON,
});

      </script>  
   </body>
</html>

Related Tutorials