Dmytro Kryvenko
Dmytro Kryvenko

Reputation: 343

How to add in zero values into a time series in c3.js

Are there any way to add zero values into a time series in c3.js In example you can see, that 2016-01-07 is missed. Can we display such missed dates with zero values?

var jsonData = [{"id": 569, "date": "2016-01-10", "data1": 1, "data2": 0}, {"id": 569, "date": "2016-01-06", "data1": 96, "data2": 22}, {"id": 569, "date": "2016-01-08", "data1": 24, "data2": 1}, {"id": 569, "date": "2016-01-09", "data1": 1, "data2": 0}, {"id": 569, "date": "2016-01-11", "data1": 43, "data2": 2}, {"id": 569, "date": "2016-01-12", "data1": 10, "data2": 1}] 

 var chart = c3.generate({
      bindto: '#chart',
      data: {
        json: jsonData,
        keys: {
          x: 'date',
          value: ['data1', 'data2']
        }
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: function (x) { 
            return x.toLocaleDateString('en-GB');}
          }
        }
      },
      subchart: {
        show: true
      },
      zoom: {
        enabled: true
      }
    });

http://jsfiddle.net/pr18wkz6/16/

Upvotes: 0

Views: 104

Answers (1)

charlietfl
charlietfl

Reputation: 171669

See if this works for you. A date library like moment.js would also help simplify this a bit

// first sort by date
var data = jsonData.sort(function(a, b) {
  return a.date > b.date
}).reduce(function(res, curr, i, arr) {
  res.push(curr);
  // if not last element in array increment current date
  // compare to next date and fill holes until they match
  if (arr[i + 1]) {
    var currDate = itemDate(curr.date);
    var nextDate = itemDate(arr[i + 1].date);
    while (currDate.setDate(currDate.getDate() + 1) < nextDate) {
      res.push(blankItem(currDate))
    }
  }
  return res;
}, []);

//can pass data to chart now


// date helper    
function itemDate(str) {
  var parts = str.split('-');
  return new Date(+parts[0], (+parts[1] - 1), +parts[2])
}
// new item helper for padding
function blankItem(date) {
  return {
    data1: 0,
    data2: 0,
    date: date.toISOString().slice(0, 10)
  }
}

DEMO

Upvotes: 1

Related Questions