Highcharts Demo

author(s): Torstein Hønsi

by OysteinAmundsen

HTML

<script src="https://code.highcharts.com/highcharts.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": {
    "borderWidth": 0,
    "zoomType": "x",
    "animation": false,
    "scrollablePlotArea": { "scrollPositionX": 1 },
    "height": 200,
    spacing: [0,0,0,0]
  },
  "scrollbar": { "enabled": true },
  "time": { "useUTC": false  },
  "title": { "enabled": false  },
  "legend": { "enabled": false  },
  "colors": [ "#0032FF"  ],
  "credits": { "enabled": false  },
  "plotOptions": { 
    "area": { threshold: -Infinity },
    "xrange": { "minPointLength": 1 }
  },
  "xAxis": {
    "type": "datetime",
    "labels": { "overflow": "justify" },
    "title": { "text": "Date" }
  },
  "yAxis": {
    "lineWidth": 1,
    "tickWidth": 1,
    "alternateGridColor": "#F2F2F2",
    "title": { "enabled": false },
    "categories": [ "Closed", "Open" ],
    "max": 1,
    "min": -1
  },
  "tooltip": {
    "borderRadius": 6,
    "borderColor": "#0032FF",
    "useHTML": true
  },
  "series": [
    {
      "name": "Proximity",
      "type": "xrange",
      "turboThreshold": 0,
      "borderColor": "gray",
      "animation": 0,
      "pointWidth": 20,
      "colors": [
        "#0032FF",
        "#0b5668"
      ],
      "data": [
        { "x": 1567077909855, "x2": 1567083603287, "y": 1 },
        { "x": 1567077924011, "x2": 1567077924011, "y": 0 },
        { "x": 1567083619442, "x2": 1567083619442, "y": 1 }
      ]
    },
    {
      //"turboThreshold": 1000,
      "type": "area",
      "color": "#f9d5d5",
      "lineWidth": 0,
      "animation": 0,
      "data": [
        { "x": 1566728240265, "y": 0, "name": "Lost connectivity" },
        { "x": 1566728240265, "y": 2, "name": "Loss" },
        { "x": 1567077909855, "y": 2, "name": "Gain" },
        { "x": 1567077909855, "y": 0, "name": "Gained connectivity" },
        { "x": 1567085295420, "y": 0, "name": "Lost connectivity" },
        { "x": 1567085295420, "y": 2, "name": "Loss" },
        { "x": 1567085533152, "y": 2, "name": "Gain" },
        { "x": 1567085533152, "y": 0, "name":...