<!doctype html>
<html>
<head>
<title>Line Chart</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.js"></script>
<style>
canvas {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
</style>
</head>
<body>
<div style="width:75%;">
<canvas id="canvas"></canvas>
</div>
<script>
var timeFormat = 'DD/MM/YYYY';
var config = {
type: 'line',
data: {
datasets: [
{
label: "US Dates",
data: [{
x: "04/01/2014", y: 175
}, {
x: "10/01/2014", y: 175
}, {
x: "04/01/2015", y: 178
}, {
x: "10/01/2015", y: 178
}],
fill: false,
borderColor: 'red'
},
{
label: "UK Dates",
data: [{
x: "01/04/2014", y: 175
}, {
x: "01/10/2014", y: 175
}, {
x: "01/04/2015", y: 178
}, {
x: "01/10/2015", y: 178
}],
fill: false,
borderColor: 'blue'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: "time",
time: {
format: timeFormat,
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};
</script>
</body>
</html>
Trying to figure out why ChartJS requires data to be in US format.
Data in Series is equivalent, i.e.
1, Apr, 2014
1, Oct, 2014
1, Apr, 2015
1, Oct, 2016
Chart JS treats the UK dates as
4 Jan 2014
10 Jan 2014
etc