Multiple series line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Multiple series line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://unpkg.com/chartkick@3.0.1/dist/chartkick.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.src.js"></script> 
      <script type="text/javascript">
    window.onload=function(){/*from w w  w.j av  a  2  s. c  o m*/
function parseData(input){
  var count = 10;
  return input.reduce(function(o,i){
    var oo = {};
    o['2018-10-' + count] = i;
    count++;
    //o(oo);
    return o;
  },{});
}
var inputData = [{"name":"Installation","data":[43934,52503,57177,69658,97031,119931,137133,154175]},
{"name":"Manufacturing","data":[24916,24064,29742,29851,32490,30282,38121,40434]},
    {"name":"Sales \u0026 Distribution","data":[11744,17722,16005,19771,20185,24377,32147,39387]}
];
inputData.forEach(function(i){
  console.log(i);
  i.data = parseData(i.data);
});
console.log(inputData);
new Chartkick.LineChart("chart-1",inputData , {});
    }

      </script> 
   </head> 
   <body> 
      <div id="chart-1" style="height: 300px"></div>  
   </body>
</html>

Related Tutorials