Não sei se vou conseguir ser claro, mas gostaria de fazer um gráfico mostrando a linha de utilização de CPU por minuto com Chart JS, porém com o eixo Y arredondando por hora. Consegui fazer o arredondamento utilizando parâmetros da própria ferramenta, porém, a linha do gráfico não consegue localizar a data para exibição dos pontos. No exemplo abaixo, está dando erro de addEventListener mas o gráfico está igual eu vejo.
$(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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<canvas id="chart_cpu"></canvas>
Alguma dica de como posso fazer?