chart.js 2.0 bar

by andig2

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>

JavaScript

var canvas = document.getElementById('myChart');
var config = {
  "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": "bar",
      "type": "bar",
      "backgroundColor": "#e91e63",
      "borderColor": "#e91e63",
      //"yAxisID": "axis4",
      "borderWidth": 1,
      "fill": true,
      "xAxisID": "axis-bar",
      "data": [21242, 16360, 10577, 94337, 45312, 35581, 53]
    },
    {
      "label": "line",
      "type": "line",
      "backgroundColor": "#00b",
      "borderColor": "#00b",
      //"yAxisID": "axis4",
      "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:53},
]
    },
    ]
  },

};

var myBarChart = Chart.Bar(canvas, config);