Graph of minutes per hours with Chart js

Question

I don’t know if I can be clear, but I would like to make a graph showing the CPU usage line per minute with Chart JS, but with the Y axis rounding per hour. I was able to make the rounding using parameters of the tool itself, however, the line of the graph cannot locate the date to display the points. In the example below, is giving addeventlistener error but the graph 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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.bundle.min.js"></script>
<canvas id="chart_cpu"></canvas>

Any hint on how I can do it?

Answer 1

I was able to solve it. I think the error was in the date format or in the rounding method. Below is the result.

$(function() {
  drawCharts('real', true, true);
});

function drawCharts(period, init_date, show_loading) {
  var labels = ["2017-08-07T15:36:24-03:00", "2017-08-07T15:40:24-03:00", "2017-08-07T15:44:24-03:00", "2017-08-07T15:47:24-03:00", "2017-08-07T15:50:24-03:00", "2017-08-07T15:54:24-03:00", "2017-08-07T15:57:24-03:00", "2017-08-07T16:01:24-03:00", "2017-08-07T16:05:24-03:00", "2017-08-07T16:08:24-03:00", "2017-08-07T16:12:24-03:00", "2017-08-07T16:16:24-03:00", "2017-08-07T16:20:24-03:00", "2017-08-07T16:23:24-03:00", "2017-08-07T16:27:24-03:00", "2017-08-07T16:30:24-03:00", "2017-08-07T16:33:24-03:00"];

  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: 'minutes',
            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>