I do not know if I'm going to be clear, but I'd like to make a graph showing the line of CPU utilization per minute with Chart JS, but with the Y axis rounding by the hour. I was able to do the rounding using parameters of the tool itself, however, the chart line can not find the date to display the points. In the example below, you are giving addEventListener error but the graphic is the same I see.
$(function() {
drawCharts('real', true, true);
});
function drawCharts(period, init_date, show_loading) {
var labels = ["Date(2017, 6, 20, 15, 0, 0)", "Date(2017, 6, 20, 15, 30, 0)", "Date(2017, 6, 20, 15, 33, 0)", "Date(2017, 6, 20, 15, 36, 0)", "Date(2017, 6, 20, 15, 39, 0)", "Date(2017, 6, 20, 15, 42, 0)", "Date(2017, 6, 20, 15, 45, 0)", "Date(2017, 6, 20, 15, 48, 0)", "Date(2017, 6, 20, 15, 51, 0)", "Date(2017, 6, 20, 15, 54, 0)", "Date(2017, 6, 20, 16, 0, 0)", "Date(2017, 6, 20, 16, 3, 0)", "Date(2017, 6, 20, 16, 6, 0)", "Date(2017, 6, 20, 16, 9, 0)", "Date(2017, 6, 20, 16, 12, 0)", "Date(2017, 6, 20, 16, 15, 0)", "Date(2017, 6, 20, 16, 18, 0)", "Date(2017, 6, 20, 16, 21, 0)", "Date(2017, 6, 20, 16, 30, 0)"];
var myChart = new Chart($("#chart_cpu"), {
type: 'line',
data: {
labels: labels,
datasets: [{
spanGaps: false,
label: 'CPU',
fill: false,
pointHitRadius: 25,
backgroundColor: 'rgba(75,192,192,0.4)',
borderColor: 'rgba(75,192,192,1)',
pointBorderColor: 'rgba(75,192,192,1)',
pointBackgroundColor: '#fff',
data: [35, 85, 77, 29, 97, 7, 92, 30, 72, 67, 60, 79, 41, 43, 37, 85, 43, 62, 20],
borderWidth: 1
}]
},
options: {
title: {
display: true,
text: 'CPU'
},
legend: {
display: false,
},
layout: {
padding: {
left: 50,
right: 50,
top: 50,
bottom: 50
}
},
animation: {
duration: 500,
},
hover: {
animationDuration: 100,
},
scales: {
xAxes: [{
ticks: {
},
type: 'time',
time: {
round: "hour",
parser: "YYYY, M, D, H, m, s",
displayFormats: {
'millisecond': '',
'second': 'H:mm',
'minute': 'H:mm',
'hour': 'H:mm',
'day': 'H:mm',
'week': 'MMM DD',
'month': 'MMM DD',
'quarter': 'MMM DD',
'year': 'MMM DD',
},
tooltipFormat: 'D MMM YYYY H:mm'
}
}],
yAxes: [{
ticks: {
beginAtZero: true,
stepSize: 25,
min: 0,
max: 100,
callback: function(value, index, values) {
return value + "% ";
}
}
}]
}
}
});
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<canvas id="chart_cpu"></canvas>Any tips on how I can do this?