display of more than 1 series in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

display of more than 1 series in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <style id="compiled-css" type="text/css">

#container {/*w w w .jav a  2  s.  co  m*/
   min-width: 310px;
   max-width: 800px;
   height: 400px;
   margin: 0 auto
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
var data = [
  [0.80299997329712, 0.80599999427795, 0.80599999427795, 0.80800002813339, 0.80800002813339, 0.80699998140335, 0.80099999904633, 0.80099999904633, 0.78700000047684, 0.77799999713898],
  [0.80599999427795, 0.80900001525879, 0.80800002813339, 0.81000000238419, 0.80900001525879, 0.81000000238419, 0.80299997329712, 0.80299997329712, 0.78899997472763, 0.78299999237061]
]
var chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Daily Voltage'
  },
  subtitle: {
    text: ''
  },
  xAxis: {
    categories: ['12:00 AM', '1:00 AM', '2:00 AM', '3:00 AM', '4:00 AM', '5:00 AM', '6:00 AM', '7:00 AM', '8:00 AM', '9:00 AM', '10:00 AM', '11:00 AM', '12:00 PM', '1:00 PM', '2:00 PM', '3:00 PM', '4:00 PM', '5:00 PM', '6:00 PM', '7:00 PM', '8:00 PM', '9:00 PM', '10:00 PM', '11:00 PM']
  },
  yAxis: {
    title: {
      text: 'FEEDER 1'
    }
  },
  plotOptions: {
    line: {
      dataLabels: {
        enabled: true
      },
      enableMouseTracking: true
    }
  },
  series: [{
      name: 'Voltage A',
      data: data[0]
    },
    {
      name: 'Voltage B',
      data: data[1]
    }
  ]
});

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

Related Tutorials