master mixed bar/line chart

by andig2

HTML

<script src="http://chartjs.org/dist/master/Chart.bundle.min.js"></script>
<canvas id="canvas" width="400" height="200"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var config = {
	type:"bar",
  "options": {
    "scales": {
      "xAxes": [{
        "type": "category",
        "id": "axis-bar",
      }, {
        "type": "time",
        "id": "axis-time",
        display: false,
      }, ],
    },
  },
  "data": {
    "labels": ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
    "datasets": [{
      "label": "line",
      "type": "line",
      "backgroundColor": "#00b",
      "borderColor": "#00b",
      "borderWidth": 1,
      "fill": false,
      "xAxisID": "axis-time",
      "data": [{
        x: 1 * 3600,
        y: 2124
      }, {
        x: 1.5 * 3600,
        y: 12124
      }, {
        x: 2 * 3600,
        y: 1636
      }, {
        x: 2.5 * 3600,
        y: 11636
      }, {
        x: 3 * 3600,
        y: 1057
      }, {
        x: 3.5 * 3600,
        y: 11057
      }, {
        x: 4 * 3600,
        y: 9433
      }, {
        x: 4.5 * 3600,
        y: 19433
      }, {
        x: 5 * 3600,
        y: 4512
      }, {
        x: 5.5 * 3600,
        y: 4512
      }, {
        x: 6 * 3600,
        y: 3581
      }, {
        x: 6.5 * 3600,
        y: 3581
      }, {
        x: 7 * 3600,
        y: 53
      }, {
        x: 7.5 * 3600,
        y: 8000
      }, ]
    }, {
      "label": "bar",
      "type": "bar",
      "backgroundColor": "#e91e63",
      "borderColor": "#e91e63",
      "borderWidth": 1,
      "fill": true,
      "xAxisID": "axis-bar",
      "data": [21242, 16360, 10577, 94337, 45312, 35581, 5300]
    }, ]
  },
};

var myBarChart = new Chart(canvas, config);