Highcharts Time Axis

Trying different data shapes

by Ben Clayton

HTML

<script src="https://vending.lrsdedicated.com/script/jQuery/highcharts-4.0.3/js/highcharts.js"></script>
<script src="https://vending.lrsdedicated.com/script/jQuery/highcharts-4.0.3/js/highcharts-more.js"></script>
<script src="https://vending.lrsdedicated.com/script/jQuery/highcharts-4.0.3/js/modules/exporting.js"></script>
<script src="https://vending.lrsdedicated.com/script/jQuery/highcharts-4.0.3/js/modules/data.js"></script>
<div id="graph-27874" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<div class='notes'>
  This Graph uses Highcharts module "data.js"
</div>

CSS

.notes {
  margin-top: 40px;
  padding: 20px;
  background-color: #FFF0F0;
}

JavaScript

$(function() {

  var chart = new Highcharts.Chart({
    "yAxis": {
      "plotLines": [{
        "width": 1,
        "color": "#808080",
        "value": 0
      }],
      "min": 0,
      "title": {
        "text": ""
      }
    },
    "xAxis": {
      "type": "datetime",
      "title": {
        "text": "day"
      },
      plotBands: [{ // mark the weekend
          color: '#FCFFC5',
          label:{text:"Video A"},
          from: Date.UTC(2016, 0, 26,3,0,0),
          to: Date.UTC(2016, 0, 27,3,0,20)
      }]
      
    },
    "chart": {
      "type": "spline",
      "renderTo": "graph-27874"
    },
    "plotOptions": {
      "spline": {
        "marker": {
          "enabled": true
        },
        "lineWidth": 2,
        "connectNulls": true
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "series": [{
      "name": "People",
      "data": [
        [Date.UTC(2016, 0, 26), 168],
        [Date.UTC(2016, 0, 27,3,0,0), 209],
        [Date.UTC(2016, 0, 28), 235],
        [Date.UTC(2016, 0, 29), 182]
      ]
    },{
      "name": "Face",
      "data": [
        [Date.UTC(2016, 0, 26), 89],
        [Date.UTC(2016, 0, 27), 354],
        [Date.UTC(2016, 0, 28), 87],
        [Date.UTC(2016, 0, 29), 171]
      ]
    },{
      "name": "Blob",
      "data": [
        [Date.UTC(2016, 0, 24),  19],
        [Date.UTC(2016, 0, 25),  30],
        [Date.UTC(2016, 0, 26),  100],
        [Date.UTC(2016, 0, 27), 150],
        [Date.UTC(2016, 0, 28),  25],
        [Date.UTC(2016, 0, 29),  25]
      ]
    }]


    ,
    "tooltip": {
      "formatter": function() {
        return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + '' + this.y;
      }
    },
    "subtitle": {
      "text": ""
    },
    "debug": "SQL: ",
    "title": {
      "text": null,
      "x": 40
    }
  });

});