Highcharts Time Axis

3 series - config as per generated by CMS graphing code

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"
      }
    },
    "chart": {
      "type": "spline",
      "renderTo": "graph-27874"
    },
    "plotOptions": {
      "spline": {
        "marker": {
          "enabled": false
        },
        "lineWidth": 2,
        "connectNulls": true
      }
    },
    "credits": {
      "enabled": false
    },
    "legend": {
      "enabled": true
    },
    "data": {
      "rows": [
        ["day", "People", "Face", "Faces in group"],
        [Date.UTC(2016, 0, 26), "168", "89", "19"],
        [Date.UTC(2016, 0, 27), "209", "354", "25"],
        [Date.UTC(2016, 0, 28), "235", "87", "25"],
        [Date.UTC(2016, 0, 29), "182", "171", "25"],
        [Date.UTC(2016, 0, 30), "19", "2", "2"],
        [Date.UTC(2016, 0, 31), "19", "0", "0"],
        [Date.UTC(2016, 1, 01), "170", "38", "15"],
        [Date.UTC(2016, 1, 02), "88", "44", "15"],
        [Date.UTC(2016, 1, 03), "243", "449", "49"],
        [Date.UTC(2016, 1, 04), "161", "193", "18"],
        [Date.UTC(2016, 1, 05), "168", "364", "33"],
        [Date.UTC(2016, 1, 06), "62", "0", "0"],
        [Date.UTC(2016, 1, 07), "97", "0", "0"],
        [Date.UTC(2016, 1, 08), "160", "72", "9"],
        [Date.UTC(2016, 1, 09), "98", "13", "3"],
        [Date.UTC(2016, 1, 10), "118", "40", "10"],
        [Date.UTC(2016, 1, 11), "116", "24", "10"],
        [Date.UTC(2016, 1, 12), "57", "6", "5"],
        [Date.UTC(2016, 1, 13), "1064", "0", "0"],
        [Date.UTC(2016, 1, 14), "1086", "0", "0"],
        [Date.UTC(2016, 1, 15), "204", "113", "11"],
        [Date.UTC(2016, 1, 16), "66", "9", "5"],
        [Date.UTC(2016, 1, 17), "45", "19", "5"]
      ]
    },
    "tooltip": {
      "formatter": function() {
       ...