Plotting Chart from multiple data points in json for line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

Plotting Chart from multiple data points in json for line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts json sensor reading</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> 
      <style id="compiled-css" type="text/css">

#container {//from  ww w.  j  a v a  2s.  c o m
   min-width: 310px;
   max-width: 800px;
   height: 400px;
   margin: 0 auto
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/series-label.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
var json = [{
  "timestamp": "2018-05-30 00:33:05",
  "temperature": "67.39",
  "humidity": "66.57",
  "pressure": "99.21"
}, {
  "timestamp": "2018-05-30 00:35:05",
  "temperature": "45.39",
  "humidity": "69.57",
  "pressure": "99.00"
}]
$(function() {
  var temperature = [],
    humidity = [],
    pressure = [];
  $.each(json, function(i, el) {
    let tmpTimestamp = new Date(el.timestamp).getTime() //get the millisecond representation of the timestamp
    temperature.push({
      x: tmpTimestamp,
      y: parseFloat(el.temperature)
    })
    humidity.push({
      x: tmpTimestamp,
      y: parseFloat(el.humidity)
    })
    pressure.push({
      x: tmpTimestamp,
      y: parseFloat(el.pressure)
    })
  })
  //Create array containing all series
  var series = [{
    name: 'Temperature',
    data: temperature
  }, {
    name: 'Humidity',
    data: humidity,
    yAxis: '1'
  }, {
    name: 'Pressure',
    data: pressure,
    yAxis: '2'
  }]
  $('#container').highcharts({
    series: series,
    xAxis: {
      type: 'datetime', 
      minPadding: 0.1, 
      maxPadding: 0.1, 
      tickInterval: 1000 * 60 
    },
    yAxis: [{
      id: '0',
      title: {
        text: 'Temperature',
        style: {
        color: Highcharts.getOptions().colors[0]
        }
      },
      labels: {
            format: '{value}?C',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        }
    }, {
      id: '1',
        opposite: true,
      title: {
        text: 'Humidity',
        style: {
        color: Highcharts.getOptions().colors[1]
        }
      },
      labels: {
            format: '{value}%',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        }
    }, {
      id: '2',
      opposite: true,
      title: {
        text: 'Pressure',
        style: {
        color: Highcharts.getOptions().colors[2]
        }
      },
      labels: {
            format: '{value}mb',
            style: {
                color: Highcharts.getOptions().colors[2]
            }
        }
    }],
    title: {
      text: 'Title'
    }
  })
})

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

Related Tutorials