use MySQL DateTime on XAXIS in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

use MySQL DateTime on XAXIS 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"> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    chart: {//from w  w w  . ja  va 2 s. c  om
        type: 'spline'
    },
       title: {
                text: 'Consumption & Temperature monitoring'
        },
        subtitle: {
                text: 'Heating experiment - LTU, Summer 2017'
        },
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },
        title: {
            text: 'Date'
        }
    },
        yAxis: {
                title: {
                        text: 'Measured values (?C or kW)'
                        }
        },
    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },
    series: [{
        name: 'Wall plug consumption',
        // Define the data points. All series have a dummy year
        // of 1970/71 in order to be compared on the same x axis. Note
        // that in JavaScript, months start at 0 for January, 1 for February etc.
        //Array ( [0] => 1501771394000 [1] => 1501771426000 [2] => 1501771458000 [3] => 1501771490000 [4] => 1501771521000 [5] => 1501771553000
        data: [
            [1501771394000, 130],
            [1501865664000, 120],
            [1501978921000, 130]
        ]
    }, {
        name: 'Inside temperature',
        data: [
            [1501771394000, 19],
            [1501865664000, 20],
            [1501978921000, 24],
        ]
    }, {
        name: 'Thermostat setpoint',
        data: [
            [1501771394000, 21],
            [1501865664000, 20],
            [1501978921000, 21],
        ]
    }, {
        name: 'Outside temperature',
        data: [
            [1501771394000, 30],
            [1501865664000, 22],
            [1501978921000, 34],
        ]
    }]
});

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

Related Tutorials