Highcharts Demo - M2M Sync and Draw time

by Ben Clayton

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.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>

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'line',
    zoomType: 'x'

  },
  title: {
    text: 'Data Processing'
  },
  subtitle: {
    text: 'SYNC and DRAW Times'
  },
  xAxis: {
    type: 'datetime',
    dateTimeLabelFormats: { // don't display the dummy year
      month: '%e. %b',
      year: '%b'
    },
    title: {
      text: 'Date'
    }
  },
  yAxis: {
    title: {
      text: 'Active'
    },
    min: 0
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br>',
    pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
  },

   plotOptions: {
                line: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
                        },
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },

  colors: ['#6CF', '#93F', '#06C', '#036', '#000'],

  // 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.
  series: [{
    name: "SYNC",
    data: [
      [Date.UTC(2018, 03, 10), 0],
      [Date.UTC(2018, 03, 10, 11, 0), 0],
      [Date.UTC(2018, 03, 10, 12, 0), 0],
      [Date.UTC(2018, 03, 10, 12, 0, 1), 1],
      [Date.UTC(2018, 03, 10, 12, 5), 1],
      [Date.UTC(2018, 03, 10, 12, 5, 0, 1), 0],
     ...