1

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?

1 Resposta 1

1

Consegui solucionar. Creio que o erro estava no formato da data ou no método de arredondamento. Segue abaixo o resultado.

$(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>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .