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
               },
                   xAxis: {
                 type: 'datetime',
                 gridLineWidth: 1,
                 gridLineColor: '#e6eaee',
          ...