Highcharts Demo

author(s): Torstein Hønsi

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

JavaScript

$(function () {
    $('#container').highcharts({
  "title": {
    "text": "This is a title"
  },
  "subtitle": {
    "text": "7 Days (01/16/2014 - 01/22/2014)"
  },
  "xAxis": {
    "type": "datetime",
    "dateTimeLabelFormats": {
      "day": "%b %e"
    }
  },
  "yAxis": {
    "title": {
      "text": "Y axis title"
    },
    "min": -1,
    "max": 7
  },
  "plotOptions": {
    "column": {
      "showInLegend": true,
      "stacking": "stacking"
    }
  },
  "series": [
    {
      "name": "Green",
      "color": "#4CB158",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
        {
          "x": 1389848400000,
          "y": 2,
        }
      ],
      "threshold": -10
    },
    {
      "name": "Yellow",
      "color": "#FFA93C",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
      ],
      "threshold": -10
    },
    {
      "name": "Red",
      "color": "#EA494A",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
        {
          "x": 1390280400000,
          "y": 4
        }
      ],
      "threshold": -10
    },
    {
      "name": "Grey",
      "color": "#cccccc",
      "borderColor": "#FFFFFF",
      "type": "column",
      "data": [
        {
          "x": 1389934800000,
          "y": 0
        },
        {
          "x": 1390021200000,
          "y": 0
        },
        {
          "x": 1390107600000,
          "y": 0
        },
        {
          "x": 1390194000000,
          "y": 0
        },        
        {
          "x": 1390366800000,
          "y": 0
        }
      ],
      "threshold": -10
    }
  ]
});
});