Highcharts Demo Time Ranges

Could be used for Draws/Syncs for M2M App data processing

by Ben Clayton

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {

  chart: {
    type: 'columnrange',
    inverted: true
  },

  title: {
    text: 'DATA PROCESSING'
  },

  subtitle: {
    text: 'Syncs and Draws'
  },

  xAxis: {
    categories: ['SYNC1', 'SYNC2', 'DRAW1', 'DRAW2']
  },

  yAxis: {
    title: {
      text: 'Datetime'
    },
    type: "datetime"

  },

  tooltip: {
    valueSuffix: 'date' // needs a formatter here for datetime
  },

  plotOptions: {
    columnrange: {
      dataLabels: {
        enabled: true,
        format: 'Hello' // {y} need format as hh:mm
      },
      columnWidth: 1
    }
  },

  legend: {
    enabled: false
  },

  series: [{
    name: 'Temperatures',
    data: [
      [Date.UTC(1970, 10, 15), Date.UTC(1970, 10, 16)], // start and finish for SYNC1
      [Date.UTC(1970, 10, 25), Date.UTC(1970, 10, 26)],
      [Date.UTC(1970, 10, 25), Date.UTC(1970, 10, 26)],
      [Date.UTC(1970, 10, 25), Date.UTC(1970, 10, 28)]
    ]
  }]

});