Tuesday 14 February 2017

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

5 comments :

  1. There is visibly a bundle to realize about this. I suppose you made various good poiints inn features also.

    ReplyDelete
  2. TÒ»anks for finaⅼly writing agout >"Create time series data using JavaScript" <Liked it!

    ReplyDelete
  3. As of late. With all the best program sellers utilizing it, this is drawing in a considerable measure of business towards HTML5 dialect. This leaves a high extent of web improvement in the prospective years. css

    ReplyDelete
  4. How about using pondjs, would it be the same or similar concept for it.I use pond js for data points and I keep getting ms, how would I avoid that conversion. Issue I am having is the dates being displayed when the brush(graph slider) moves, and all im getting are in ms.

    ReplyDelete