Create time series data using JavaScript

What is time series

Time series is an array or object which usually contains date and count or date and label or any other combinations. Which will be used to plot time series charts. For example high chart, d3 charts etc. are using time series data.

Why we need a time series data

As explained above most of charts using time series data to plot clean charts. For example we have data on Jan 1 2017, Jan 10 2017 and Jan 20 2017 and some counts associated with each other. If we show this data directly in charts it won't be a nice view for the users. So we need to fill the remaining dates probably with a zero count (depends on your requirements). Especially if you are trying for a time slider graph then most of the chart required time series data.

Sample array

 [1486655240,12],[1486655241,14], [1486655245,17]

How do we create a time series data

Logic here is that fill missing date and add zero count for them.

Javascript

function createTimeSeriesData(inputdata) {
  var timeseries = [];

  if (inputdata.length == 1) {
    timeseries.push(inputdata[0]);
  }

  else {
    var maxDate = inputdata[inputdata.length - 1][0];
    var dateArray = [];
    var index = 0;
    var nextDate = 0;

    while (nextDate <= maxDate) {
      nextDate = moment(inputdata[0][0]).add(index, 'days').valueOf();
      dateArray.push(nextDate);
      index++
    }

    var _date = [];

    for (var i = 0; i < dateArray.length; i++) {
      var isTrue = false;
      for (var j = 0; j < inputdata.length; j++) {
        var _date1 = moment(inputdata[j][0]).format("MM/DD/YYYY");
        var _date2 = moment(dateArray[i]).format("MM/DD/YYYY");

        if (_date1 == _date2) {
          isTrue = true;
          _date = inputdata[j];
        }
      }
      if (isTrue) {
        timeseries.push(_date);
      }
      else {
        timeseries.push([dateArray[i], 0]);
      }
    }
  }
}

Please note I have used moment.js here for date handling.For more info https://momentjs.com

Result will be a clean charts

Related Post

1. Responsive Highchart

2. File upload validation

3. Excel like feature grid for UI

4. Customize context menu in handsontable