chart.js 2.0 mixed bar/line time
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": "time",
"time": {
"displayFormats": {
"second": "HH:mm:ss",
"minute": "HH:mm:ss",
"hour": "D. MMM HH:mm",
"day": "D. MMM",
"quarter": "[Q]Q/YYYY"
},
"min": 1483225200000,
"max": 1501538400000
},
"ticks": {
"maxRotation": 0
}
}, {
"type": "category",
"id": "axis-bar"
}],
"yAxes": [{
"id": "axis3",
"position": "right",
"gridLines": {
"drawOnChartArea": false
},
"scaleLabel": {
"display": true,
"labelString": "%"
}
}, {
"id": "axis4",
"position": "right",
"gridLines": {
"drawOnChartArea": false
},
"scaleLabel": {
"display": true,
"labelString": "Wh"
}
}]
},
"tooltips": {
"enabled": false
}
},
"data": {
"datasets": [
{
"type": "bar",
"label": "Power",
"backgroundColor": "#e91e63",
"borderColor": "#e91e63",
"yAxisID": "axis4",
"borderWidth": 1,
"fill": false,
"pointRadius": 0,
"xAxisID": "axis-bar",
"data": [2124269.623, 1636076.332, 1057725.421, 943373.783, 453434.912, 35581.248, 53.973]
},
{
"type": "line",
"label": "ModulationTempDesired",
"backgroundColor": "#90a4ae",
"borderColor": "#90a4ae",
"yAxisID": "axis3",
"borderWidth": 1,
"fill": false,
"pointRadius": 0,
"steppedLine": "before",
"data": [{"x": 1483311543649,"y": 29.868}, {"x": 1483397943562,"y": 29.043}, {"x": 1483484343475,"y": 25.89}, {"x": 1483570743765,"y": 28.174}, {"x": 1483657143498,"y": 31.129}, {"x": 1483743543729,"y": 30.287}, {"x": 1483829943467,"y": 33.369}, {"x":...