Specifying dygraphs x interval ticks

Question

I would like to control the x-axis intervals that are shown (and the vertical gridlines associate with each label point) but I have been unable to find way to do this. Dygraphs fills in x labels based on the over all x range by default, but I want more granularity. For instance if I want to present a month worth of data for July'14, I use dateWindow to set my bounds. By default Dygraphs gives me x intervals at 7/6, 7/13, 7/20, and 7/27 (the start of each week). But I want more labels and corresponding vertical lines; every 3 days for instance, instead of week start.

Is this possible? I'm happy with how each x label is displayed (so I don't think it's label formatter). I just want more of them.

Answer 1

Nowadays there's an exposed method named getDateAxis at Dygraph instance.

Find more info about it at dygraph-tickers.js.

If you want to, you can also start reading since datePicker

So, you can treat your wanted "frequency" (each 3 days, each 1 day), based on maximum and minimum values of x-axis.

My example below won't find the "best frequency", but instead will fix it to ALWAYS show a tick each HOUR.

For testing purposes, change Dygraph.HOURLY to Dygraph.TWO_DAILY and you'll have a tick each two days, no matter what zoom you're in.

g = new Dygraph(
    document.getElementById("graphdiv"),
    graph_data,
    { // other options......
      axes: {
        x: {
          ticker: function(min, max, pixels, opts, dygraph, vals) {
            return Dygraph.getDateAxis(min, max, Dygraph.HOURLY, opts, dygraph);
          },
        },
      }
    }
  );

Answer 2

Change this section in the actual dygraph-combined.js file (2327):

x: {
  pixelsPerLabel: 70, <----- change this value!!
  axisLabelWidth: 60,
  axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
  valueFormatter: Dygraph.dateValueFormatter,
  drawGrid: true,
  drawAxis: true,
  independentTicks: true,
  ticker: null  // will be set in dygraph-tickers.js
},

Changing the pixelsPerLabel value in the options block, where the graph is set up, seems not to work. I'm not sure why.