Chartjs-Chart.js – creating time series freqency chart with JSON data

by

1👍

✅

Going with #1 on your list is your best bet. I wrote an example of how you can achieve it pretty easily.

First find the frequency (I did it by month/year) and add it to a Map. I used a map because the .keys() and .values() functions for a Map are returned in insertion order. A regular object cannot guarantee order.

Then, Chart.js can display those values pretty easily using spread syntax to turn the .keys() and .values() iterators into arrays.

var a = ['2018-01-03 15:15:04', '2018-01-04 06:32:45', '2018-01-04 23:32:45', '2018-02-23 01:24:32', '2018-02-23 04:33:12', '2018-03-23 05:33:12', '2018-03-22 08:33:12', '2018-04-27 01:33:12'];

var freqMap = new Map();

a.forEach(function(time) {
  var date = new Date(time);
  var monthName = date.toLocaleString("en-us", {
    month: "short"
  });

  var key = monthName + "-" + date.getFullYear();
  var count = freqMap.get(key) || 0;
  freqMap.set(key, ++count);
});

var ctx = document.getElementById("myChart").getContext('2d');
var myLineChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: [...freqMap.keys()],
    datasets: [{
      label: 'Requests per month',
      data: [...freqMap.values()]
    }],
  },
  options: {
    elements: {
        line: {
            tension: 0
        }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          stepSize: 1
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

Leave a comment