Dygraphs: updateOptions for dynamically created charts

Question

My application dynamically creates dygraphs charts based on user input. Each chart is shown above the other one in some sort of timeline. I also want to provide the user with the ability to change a couple of options at the individual chart level.

However, as I am currently creating the charts dynamically using:

g = new Dygraph(document.getElementById("trend_" + json.id), data,
            { 
             ... some options specified here
            });

Whenever I try to update some options on one of the charts using something like this:

g.updateOptions({ ... some option });

it is only able to update the last chart created.

I was initially thinking of using an array instead, but I don't think that it will work as the charts aren't created at the same time. (This jsfiddle I created allows for it, but only if they are created at the same time)

What would be my options? If only I could pass document.getElementById() in my g.updateOptions() function...

Answer 1

If you'd to map your IDs to Dygraph objects, then store the dygraphs in an Object mapping:

var gs = {};
for (...) {
  gs[json.id] = new Dygraph("trend_" + json.id, data,
            {
              ... some options specified here
            });
}

// ....
gs[json.id].updateOptions({...});