Highcharts Demo

author(s): Torstein Hønsi

by Michel Munzert

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/xrange.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
    chart: {
        type: 'xrange'
    },
    title: {
        text: 'Highcharts X-range'
    },
    xAxis: {
        type: 'datetime',
        min: 1535930660000,
        max: 1535945061000,
    },
    yAxis: {
        title: {
            text: ''
        },
          startOnTick: false,
          endOnTick: false,
          // tickInterval: 1,
          // gridLineWidth: 1,
        categories: [
      "4402233",
      "4402237",
      "4402238",
      "4402239"
    ],
      //  reversed: true
    },
    navigator: {
    	enabled: true
    },
    series: [
    	{
        "type": "xrange",
        "borderColor": 'gray',
        //"pointWidth": 25,
        "data": [
          {
            "Thing": "d88251638cee4486b0460b833cd7859d",
            "LoadProfile": 5,
            "x": 1535930660000,
            "x2": 1535932412000,
            "y": 3
          },
          {
            "Thing": "d88251638cee4486b0460b833cd7859d",
            "LoadProfile": 2,
            "x": 1535932412000,
            "x2": 1535932427000,
            "y": 3
          },
          {
            "Thing": "d88251638cee4486b0460b833cd7859d",
            "LoadProfile": 5,
            "x": 1535932427000,
            "x2": 1535933443000,
            "y": 3
          },
          {
            "Thing": "d88251638cee4486b0460b833cd7859d",
            "LoadProfile": 2,
            "x": 1535933443000,
            "x2": 1535933453000,
            "y": 3
          },
          {
            "Thing": "d88251638cee4486b0460b833cd7859d",
            "LoadProfile": 5,
            "x": 1535933453000,
            "x2": 1535933615000,
            "y": 3
          },
          {
            "Thing": "d88251638cee4486b0460b833cd7859d",
            "LoadProfile": 2,
            "x": 1535933615000,
            "x2": 1535933639000,
            "y": 3
          },
          {
            "Thing": "d88251638cee4486b0460b833cd7859d",
            "LoadProfile": 5,
           ...