Search code examples
javascriptdata-visualizationdygraphs

Dygraph with non-numeric/non-date x axis

How can I use dygraph to create a visualization for data that uses non-numeric/non-date values in the x-axis?

I am trying to do a visualization of budget data with the following javascript pulled from a jsfiddle.

g = new Dygraph(

    // containing div
    document.getElementById("graphdiv"),

    // CSV or path to a CSV file.
    "Departments,2012 Actual,2013 Actual\n"+
    "Public Works,100,200\n"+
    "Police,50,150"      ,
    {
        title: 'Fort Lauderdale Budget Data'
    }
);

When I try to run it, I get the following errors in the browser javascript debugger console.

"Couldn't parse Public Works as a date"

"Couldn't parse Police as a date"

I did look at the axis options provided in dygraphs, but they seemed to only address formatting the value rather than parsing it. I realize that I could re-orient the axis/data to use a date as the x-axis, but I would prefer to avoid this additional work.

Solution

  • dygraphs assumes that the first column of your data is the independent (x-axis) variable. You might be able to get around this by writing a DataHandler, but it will be far easier to reorganize your data to put the year in the first column.