title: c3js › Timeseries x values not evenly spaced
body: <p>I am having an issue with the labels assigned to the values of my graph. </p>
  
  <p>The graph is a timeseries. I add values using the 'columns' property of c3js. </p>
  
  <p>I use pure timestamps (in seconds) and then convert them into strings using the label.format. </p>
  
  <p>However, this is what happens: </p>
  
  <p><a href="https://drive.google.com/file/d/0B9GDftIYQFIVb2Z3N2JfS2pzVjg/view?usp=sharing">https://drive.google.com/file/d/0B9GDftIYQFIVb2Z3N2JfS2pzVjg/view?usp=sharing</a> </p>
  
  <p>as you can notice the space is not evenly distributed, between 18-21, 25-28  October and 1-4, 4-7 November just two days while all others have three days between the dates. </p>
  
  <p>What is causing this? </p>
  
  <p>I would like to have evenly spaces gaps (same number of days). </p>
  
  <p><strong>Here is a jfiddle with the code:</strong> 
  <a href="http://jsfiddle.net/ok1k6yjo/">http://jsfiddle.net/ok1k6yjo/</a> </p>
  
  <pre><code>var array_times = [1414540800, 1414627200];
  var array_values = [67, 66.22];
  
  var labelWeight = 'weight in kg';
  
  var window_period = (30 * 24 * 3600); // last 30 days
  
  var today = Math.floor(new Date(2014,10,20,0,0,0,0).getTime() / 1000);
  var timeEnd = today;
  var timeStart = today - window_period;
  
  var toShowTime = [1414540800, 1414627200];
  var toShowValues = [67, 66.22];
  
  
  var minT = Math.min.apply(null, array_times),
      maxT = Math.max.apply(null, array_times.concat(today));
  
  var minV = Math.min.apply(null, array_values),
      maxV = Math.max.apply(null, array_values);
  
  function dateToString(e) {
      var date = new Date(e * 1000);
      return date.toDateString().substring(4);
  }
  
  
  var chart = c3.generate({
      bindto: '#chart',
      data: {
          x: 'times',
          columns: [
              ['times'].concat(toShowTime), 
              [labelWeight].concat(toShowValues)],
          labels: {
              format: {
                  y: d3.format('.2')
              }
          },
          type: 'scatter'
      },
      point: {
          r: 6
      },
      legend: {
          show: false
      },
      grid: {
          x: {
              show: true
          },
          y: {
              show: true
          }
      },
      axis: {
          x: {
              label: {
                  text: 'Time [days]'
              },
              type: 'timeseries',
              tick: {
                  fit: false,
                  //count: 29,
                  rotate: -75,
                  multiline: false,
                  format: function (e, d) {
                      return dateToString(e);
                  }
              },
              height: 100
          },
          y: {
              label: {
                  text: 'Weight [kg]',
                  position: 'outer',
                  min: minV - 10,
                  max: maxV + 10
              },
              tick: {
                  format: function (e, d) {
                      return parseFloat(e).toFixed(2);
                  }
              },
          }
      }
  });
  
  chart.axis.range({min: {x:timeStart, y:minV-10}, max: {x:timeEnd, y:maxV+10}});
  </code></pre>
  
  <p>The slight difference is due to a different starting date. </p>
  
  <p><strong>Here is another fiddle with similar issues.</strong>
  <a href="http://jsfiddle.net/hfznh45w/5/">http://jsfiddle.net/hfznh45w/5/</a></p>
  
  <pre><code>var d = (24 * 3600); // last 30 days
  
  
  //var array_times = [1414540800-8*d, 1414540800-d, 1414540800, 1414627200, 1414627200 + d, 1414627200 + 2 * d, 1414627200 + 3 * d];
  //var array_values = [61, 60, 67, 66.22, 68, 68, 68];
  
  var array_times = [];
  var array_values = [];
  
  for (var i = -8; i &lt; 30; i++) {
      array_times.push(1414540800 + (i * d));
      array_values.push(60 + i);
  }
  
  console.log(array_times);
  console.log(array_values);
  
  var labelWeight = 'weight in kg';
  
  var window_period = (30 * 24 * 3600); // last 30 days
  
  var today = Math.floor(new Date(2014, 10, 20, 0, 0, 0, 0).getTime() / 1000);
  var timeEnd = today;
  var timeStart = today - window_period;
  
  
  var minT = Math.min.apply(null, array_times),
      maxT = Math.max.apply(null, array_times.concat(today));
  
  var minV = Math.min.apply(null, array_values),
      maxV = Math.max.apply(null, array_values);
  
  function dateToString(e) {
      var date = new Date(e * 1000);
      return date.toDateString().substring(4);
  }
  
  
  var chart = c3.generate({
      bindto: '#chart',
      data: {
          x: 'times',
          columns: [
              ['times'].concat(array_times), [labelWeight].concat(array_values)],
          labels: {
              format: {
                  y: d3.format('.2')
              }
          },
          type: 'scatter'
      },
      point: {
          r: 6
      },
      legend: {
          show: false
      },
      grid: {
          x: {
              show: true
          },
          y: {
              show: true
          }
      },
      axis: {
          x: {
              padding: {
                  left: 0,
                  right: 0,
              },
              label: {
                  text: 'Time [days]'
              },
              type: 'timeseries',
              tick: {
                  fit: false,
                  rotate: -75,
                  multiline: false,
                  format: function (e, d) {
                      return dateToString(e);
                  }
              },
              height: 100
          },
          y: {
              padding: {
                  top: 0,
                  bottom: 0
              },
              label: {
                  text: 'Weight [kg]',
                  position: 'outer',
                  min: minV - 10,
                  max: maxV + 10
              },
              tick: {
                  format: function (e, d) {
                      return parseFloat(e).toFixed(2);
                  }
              }
          }
      }
  });
  
  chart.axis.range({
      min: {
          x: timeStart,
          y: minV - 10
      },
      max: {
          x: timeEnd,
          y: maxV + 10
      }
  });
  </code></pre>
  
  <p><strong>Any clue/fix is more than welcome. 
  Thank you!</strong></p>