Question

I’m trying to set the initial visiblity of some dygraphs data series by column name.

This is because the data comes from a CSV file with columns that may come or go, but I know that a couple of the columns I want to be disabled by default – but I don’t know what column number they may be (just the name).

I’m new to javascript, so the answer is likely simple.
I’m trying to do this:

<script type="text/javascript">
    g = new Dygraph(
        document.getElementById("graphdiv"),  // containing div
        "last/test.csv",
        {
            connectSeparatedPoints: true,
            includeZero: true
        }
    );

    g.setVisibility(g.indexFromSetName("writer_write_start") - 1, 0);
</script>

But this gives me an error. If I run the setVisibility command from the javascript console or an onclick event, it works fine. I suspect it’s something to do with the Dygraph not being fully loaded by the time I try to run methods referring to data in the CSV file, and I need to run this in some other way after the dygraph has fully loaded.

Answer 1

When you call new Dygraph with the path to a CSV file as its data parameter, the call is asynchronous. So your suspicion is correct — when you call g.indexFromSetName("writer_write_start"), the data needed to get the answer you want isn’t available yet.

The best way to deal with this is by moving your setVisibility code into an initial drawCallback, like so:

<script type="text/javascript">
    g = new Dygraph(
        document.getElementById("graphdiv"),  // containing div
        "last/test.csv",
        {
            connectSeparatedPoints: true,
            includeZero: true,
            drawCallback: function(dg, is_initial) {
                if (!is_initial) return;
                dg.setVisibility(dg.indexFromSetName("writer_write_start") - 1, 0);
            }
        }
    );
</script>