High Chart Step Graph

HighCharts test

by Sascha

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//code.highcharts.com/stock/highstock.js"></script>
<div id="mychart8" class="chartContent" style="height: 400px; min-width: 310px">
  &nbsp;</div>

JavaScript

jQuery(document).ready(function() {


  // start chart script

  var data = [
      [Date.UTC(2016, 4, 04, 17, 13, 01), 0],
      [Date.UTC(2016, 4, 04, 18, 20, 01), 1],
      [Date.UTC(2016, 4, 05, 18, 40, 01), 0],
      [Date.UTC(2016, 4, 05, 20, 05, 01), 1],
      [Date.UTC(2016, 4, 06, 21, 13, 01), 0]
  ];
  jQuery('#mychart8').highcharts('StockChart', {
    chart: {
      zoomType: 'x'
    },
    title: {
      text: 'Fan Speed data for 04 May 2016 - 11 May 2016 '
    },
    tooltip: {
      valueDecimals: 2
    },
    subtitle: {
      text: document.ontouchstart === undefined ?
        'Click and drag in the plot area to zoom in' : 'Pinch the chart to zoom in'
    },
    xAxis: {
      type: 'datetime',
      ordinal: false
    },
    yAxis: {
      title: {
        text: 'rpm'
      }
    },

    rangeSelector: {
      enabled: false,
      inputEnabled: false
    },

    legend: {
      enabled: false
    },
    plotOptions: {
      area: {
        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
      }
    },

    series: [{
      type: 'line',
      name: 'rpm',
      data: data,
      step: 'left',
    }]
  });


  // end chart script



});