Highcharts Demo

author(s): Torstein Hønsi

by anikettiwari

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 400px"></div>

JavaScript

$(function() {
  var keyDocumentData = {
    "data": [{
        "x": 1575244800000,
        "marker": {
          "fillColor": "#0494fe"
        },
        "y": 0,
        "name": "Major Document",

        "enable_url": true,
        "number": 43,
        "description": "Last Decision"
      },
      {
        "x": 1543795200000,
        "marker": {
          "fillColor": "#0494fe"
        },
        "y": 0,
        "name": "Review",

        "enable_url": true,
        "number": 10,
        "description": "Second Decision"
      },
      {
        "x": 1529625600000,
        "marker": {
          "fillColor": "#0494fe"
        },
        "y": 0,
        "name": "OWNER",
        "number": 4,
        "enable_url": true,

        "description": "middle notice"
      },
      {
        "x": 1527724800000,
        "marker": {
          "fillColor": "#0494fe"
        },
        "y": 0,
        "name": "IPR Petition US7908342",

        "enable_url": true,
        "number": 2,
        "description": "First"
      }
    ],
    "type": "scatter",
    "marker": {
      "radius": 5,
      "symbol": "largemarker"
    },
    "dataLabels": {
      "enabled": true
    }
  }

  var plotBands = {
    "first_phase": {
      "from": 1527724800000,
      "to": 1543795200000
    },
    "last_phase": {
      "from": 1543795200000,
      "to": 1580256000000
    }
  }

  Highcharts.SVGRenderer.prototype.symbols.smallmarker = function(x, y, w, h) {
    return ['M', x + 7, y + 5,
      'C', x - 20, y - 28, x + 33, y - 30, x + 7, y + 5
    ];
  };

  Highcharts.SVGRenderer.prototype.symbols.largemarker = function(x, y, w, h) {
    return ['M', x + 7, y + 5,
      'C', x - 30, y - 38, x + 42, y - 41, x + 7, y + 5
    ];
  };

  $('#container').highcharts({
    chart: {
      renderTo: 'container',
      spacingLeft: 10,
      spacingRight: 10,
      height: 350,
      events: {
        render() {
          let chart = this,
            x1from =...