Search code examples
utcepochdygraphs

After loading UTC data, Dygraph axis dates are too long and won't adjust

I'm feeding Dygraph some nice unix epoch data, and it's showing the axes like this:

Dammit

I can't get it to be more terse and dynamically adjusted, after much fiddling. Here's my code:

var graph = new Dygraph(
           document.getElementById('plot' + formNum),
           fileURL, // path to CSV file
            {
                legend:'always',
                title: "Activity of " + station + ".BK." + fullChannel + dateString,
                valueParser: function(x){
                    return x*1000;
                },
                ticker: Dygraph.dateTicker
            }

Why are they so long? How can I change them and still take advantage of Dygraph's features that choose the level of detail on the label (i.e., no month listed on an hour's worth of data) depending on the time interval?

Here's some data:

1420498200.06954,425
1420498201.06954,425
1420498202.06954,424
1420498203.06954,425
1420498204.06954,425
1420498205.06954,425
1420498206.06954,426
1420498207.06954,426

Thoughts?

Solution

  • When you override xValueParser (I'm not sure what valueParser is), you bypass dygraphs' logic for determining the type of the x-axis. Unfortunately, there's no master switch to say "this is a date axis" or "this is a numeric axis" so, if you want to go down this road, you'll have to specify all the formatters yourself:

    new Dygraph(div, data, {
    ticker: Dygraph.dateTicker,
    axes: {
        x: {
            axisLabelFormatter: Dygraph.dateAxisLabelFormatter,
            valueFormatter: Dygraph.dateValueFormatter
        }
    }
})

    See this demo for a fully-worked example.