Time series line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Time 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">
    window.onload=function(){//from  w w w.  ja  v  a2  s  .c o m
const json = [
   {"usage_idle": 99.49, "time": "2017-06-12T10:15:20Z"},
  {"usage_idle": 99.59, "time": "2017-06-12T10:15:21Z"}
]
const options = {
   xAxis: { type: 'datetime' },
  yAxis: { type: 'logarithmic' },
  series: [{
    data: json.map((o) => ({ x: Date.parse(o.time), y: o.usage_idle })),
    type: 'column'
  }]
}
const chart = Highcharts.chart('container', options)
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials