Dojox chart2d connectToPlot links and examples

I spent some time scouring the godawful dojo documentation this morning looking for help with the Chart2d api. I was looking for a way to create hover effects when mousing over a chart; something like the google finance chart widget (if you have flash).  I kept finding links to this event sample page:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/tests/test_event2d.html

and this sample script page:

http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/charting/action2d/

The api reference is here, and, like classic Dojo fashion, the api is completely undocumented.The only hint they give for usage is:

chart.connectToPlot(
plotName, // the unique plot name you specified when creating a plot
object, // both object and method are the same used by dojo.connect()
method // you can supply a function without an object
);

I was able to piece together this example from the comments of this post. The main usage for a chart2d mouse event seems to be:

somechart.connectToPlot("nameOfPlot",function(evt){console.log(evt)});

Here is a more fleshed out example:

[script type="text/javascript"]
dojo.require("dojox.charting.Chart2D");
makeCharts = function(){
var chart1 = new dojox.charting.Chart2D("simplechart");
chart1.addPlot("default", {type: "Columns"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: false});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.connectToPlot( "default", function(evt){console.log(evt);}) // you can supply a function without an object
//the next line is optional and may provide further information, but is independent of connectToPlot.
//chart1.surface.connect("onclick", function(evt){console.log(chart1.getCoords());console.log(evt)})
chart1.render();
};
dojo.addOnLoad(makeCharts);
[script]

Don’t forget to turn the script square brackets into script angle brackets.  Here, “default” is the name of the plot to which you will to attach the event and chart1 is the actual chart node. The biggest gotcha I have had so far is that the connecttoplot and surface.connect must come BEFORE the .render() call.

Tags: , , ,

One Response to “Dojox chart2d connectToPlot links and examples”

  1. destefano Says:

    I like u, and the ur gotcha point

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: