Basic Column Chart - CanvasJS

Basic Column Chart

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/>
<!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 175px; width: 380px;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  "animationEnabled": true,
  "axisX": {
    "gridColor": "rgba(255,255,255,0.5)",
    "gridThickness": 1,
    "interval": 1,
    "labelAngle": -80,
    "labelFontColor": "white",
    "labelFontSize": 10,
    "lineColor": "rgba(255,255,255,0.5)",
    "lineThickness": 1,
    "tickColor": "rgba(255,255,255,0.5)",
    "tickThickness": 1
  },
  "axisY": {
    "gridColor": "rgba(255,255,255,0.5)",
    "gridThickness": 1,
    "includeZero": false,
    "interval": 1,
    "labelFontColor": "white",
    "labelFontSize": 12,
    "lineColor": "rgba(255,255,255,0.5)",
    "lineThickness": 0,
    "tickColor": "rgba(255,255,255,0.5)",
    "tickThickness": 1,
    "minimum": -0.3
  },
  "backgroundColor": "#79C8E9",
  "data": [{
    "color": "white",
    "dataPoints": [{
      "label": "07:00",
      "x": 0,
      "y": 0
    }, {
      "label": "15",
      "x": 1,
      "y": 0
    }, {
      "label": "30",
      "x": 2,
      "y": 0
    }, {
      "label": "45",
      "x": 3,
      "y": 1
    }, {
      "label": "08:00",
      "x": 4,
      "y": 0
    }, {
      "label": "15",
      "x": 5,
      "y": 0
    }, {
      "label": "30",
      "x": 6,
      "y": 1
    }, {
      "label": "45",
      "x": 7,
      "y": 0
    }, {
      "label": "09:00",
      "x": 8,
      "y": 0
    }, {
      "label": "15",
      "x": 9,
      "y": 1
    }, {
      "label": "30",
      "x": 10,
      "y": 2
    }, {
      "label": "45",
      "x": 11,
      "y": 0
    }, {
      "label": "10:00",
      "x": 12,
      "y": 0
    }, {
      "label": "15",
      "x": 13,
      "y": null
    }, {
      "label": "30",
      "x": 14,
      "y": null
    }, {
      "label": "45",
      "x": 15,
      "y": null
    }, {
      "label": "11:00",
      "x": 16,
      "y": null
    }, {
      "label": "15",
      "x": 17,
      "y": null
    }, {
      "label": "30",
      "x": 18,
      "y": null
    }, {
      "label": "45",
      "x": 19,
      "y": null
   ...