Search code examples
javascriptdygraphs

Remove hours from time series

Dygraphs allows easy display of time series...

However, if my data contains only two data points, it automatically fills the gaps in X axis with hours. Is it possible to disable this functionality?
I searched and tried many options but not found anything useful.

Example might be the 'Time Series Drawing Demo' from the gallery - if executed on only few datapoints, it fills the 'gaps' with hours.

This is a good example:

g = new Dygraph(document.getElementById('plot'),"a,b\n2008-12-01,0.9\n2008-12-02,0.3\n2008-12-03,0.7\n")

UPDATE- this seems to be working:

ticker: function(a, b, pixels, opts, dygraph, vals) {
  var chosen = Dygraph.pickDateTickGranularity(a, b, pixels, opts);
  if(chosen==12) chosen=13;
  if (chosen >= 0) {
    return Dygraph.getDateAxis(a, b, chosen, opts, dygraph);
  } else {
    // this can happen if self.width_ is zero.
    return [];
  }
};
Solution

  • Your issue is not that you have two points, but that your points cover a certain amount of time. Dygraphs tries to calculate the best granularity for the x axis tick marks in a given set of data.

    One way to modify the default calculation is by using the pixelsPerLabel option.

    Example: http://jsfiddle.net/kaliatech/P8ehg/

    var data = "a,b\n2008-12-01,0.9\n2008-12-02,0.3\n2008-12-03,0.7\n";
g = new Dygraph(document.getElementById("plot"), data, {
  axes: {
    x: {
        pixelsPerLabel: 100
      }
    }
});

    This requires hard coding a pixel width though, and it is still ultimately dependent on the data set that you are graphing. A more flexible approach might be to use the ticker option, allowing you to supply your own function for calculating label granularity. See the documentation and built-in functions of dygraph-tickers.js.

    See also:

    EDIT: Example using ticker. This requires that you are familiar with the data and the data range is somewhat constant, otherwise you could end up with unreadable x-axis labels.

    var g = new Dygraph(document.getElementById("demodiv3"), data(), {
  title: 'Example for changing x-axis label granularity 3',
  axes: {
    x: {
        ticker: function(a, b, pixels, opts, dygraph, vals) {
          var chosen = Dygraph.pickDateTickGranularity(a, b, pixels, opts);
          //Force to DAILY if built-in calculation returned SIX_HOURLY
            //if(chosen==Dygraph.SIX_HOURLY)
            //    chosen=Dygraph.DAILY;
          //or

          //Force to DAILY always
          chosen = Dygraph.DAILY;

          if (chosen >= 0) {
            return Dygraph.getDateAxis(a, b, chosen, opts, dygraph);
          } else {
            return [];
          }
        }        
      }

    }
});