Chart.js #4661 test01
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script>
<script src="https://rawgit.com/chartjs/chartjs.github.io/master/dist/master/Chart.js"></script>
<canvas id="myChart1"></canvas>
<canvas id="myChart2"></canvas>
<canvas id="myChart3"></canvas>
JavaScript
var ctx1 = document.getElementById('myChart1').getContext('2d');
var chart1 = new Chart(ctx1, {
type: 'bar',
data: {
datasets: [{
data: [{
x: '2017-07-10',
y: 1
},
{
x: '2017-07-11',
y: 2
},
{
x: '2017-07-12',
y: 3
},
{
x: '2017-07-13',
y: 4
}
]
}]
},
options: {
title: {
display: true,
text: 'Point objects with time in String format'
},
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'day'
},
offset: true
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
var ctx2 = document.getElementById('myChart2').getContext('2d');
var chart2 = new Chart(ctx2, {
type: 'bar',
data: {
datasets: [{
data: [
/* {x: moment('2017-07-10').valueOf(), y: 1},
{x: moment('2017-07-11').valueOf(), y: 2},
{x: moment('2017-07-12').valueOf(), y: 3},
{x: moment('2017-07-13').valueOf(), y: 4} */
{
x: new Date(1543250688000),
y: 1
}, {
x: new Date(1543245244000),
y: 2
}, {
x: new Date(1543244768000),
y: 3
}, {
x: new Date(1543238314000),
y: 4
}, {
x: new Date(1543238313000),
y: 5
},
]
}]
},
options: {
title: {
display: true,
text: 'Point objects with time in Number format'
},
scales: {
xAxes: [{
barPercentage: 0.4,
categoryPercentage: 0.4,
barThickness: 50,
ticks: {
source: 'data',
},
distribution: 'series',
type: 'time',
gridLines: {
offsetGridLines: true
}
}],
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
...