Eden Ridgway's Blog

.Net and Web Development Information

  Home :: Contact :: Syndication  :: Login
  105 Posts :: 1 Stories :: 78 Comments :: 3 Trackbacks

Search

Article Categories

Archives

Post Categories

Development

General

When evaluating the Dojo Charting library as an option for my CruiseControl statistics page replacement it was very evident that the Dojo team hadn't gotten around to providing documentation for this donated library. If you are unfamiliar with what the features the library offers you should take a look at this Ajaxian post. There is also a test page for the library which I could have sworn was down a day or two ago.

In the interest of possibly helping others save some time getting into the chrting library I wanted to post a basic introductory example. Please be aware that I do not know this library in depth, nor have I worked with the Dojo libraries extensively.

What is great about the Dojo charting implementation is that it is very versatile. This however comes at the cost of a slightly more involved structure which makes it somewhat more tedious to use than PlotKit. The composition of the various graphing objects is illustrated in the diagram below. As you can see from the relationships in the diagram they have allowed for features such as the ability to render multiple different graphs, using different plotters, in one plot area. They also have different implementations of the Axis, PlotArea and Plotter objects for VML and SVG rendering.

Dojo Charting Diargam

The Example

So to create a graph one would start off by including a reference to the dojo library and the required namespaces:

<script type="text/javascript" src="dojo/dojo.js"></script>

<script type="text/javascript">

//Include the required dojo libraries/namespaces
dojo.require("dojo.collections.Store");
dojo.require("dojo.charting.Chart");
dojo.require('dojo.json');

</
script>

You then define or retrieve the graph data and store it in the collection store. This then will be fed into your graph as a series, defined like this:

var exampleData =
[
{ time:
10, count: 7382 },
{ time:
20, count: 1852 },
{ time:
35, count: 2397 },
{ time:
50, count: 1442 },
{ time:
55, count: 1854 }
]
;

var
store = new dojo.collections.Store();
store.setData(exampleData);

var
timeSeries = new dojo.charting.Series({
dataSource: store,
bindings: { x:
"time", y: "count" },
label:
"Example Series"
});

Next come the axis definitions where you can specify the data display range, data source and the tick labels:

//Define the x-axis
var xAxis = new dojo.charting.Axis();

//Set the upper and lower data range values
xAxis.range = { lower: exampleData[0].time, upper: exampleData[exampleData.length-1].time };

xAxis.origin = "max";
xAxis.showTicks = true;
xAxis.label = "Example chart";

//Setup the x tick marks on the chart
xAxis.labels = [
{ label:
'First', value: 20 },
{ label:
'Second', value: 25 },
{ label:
'Third', value: 35 },
{ label:
'Fourth', value: 50 },
{ label:
'Fifth', value: 55 }
]
;

//Define the y-axis
var yAxis = new dojo.charting.Axis();
yAxis.range = { lower: 0, upper: 5000 };
yAxis.showLines = true;
yAxis.showTicks = true;
yAxis.label = "Time Taken";

//Setup the y tick marks on the chart
yAxis.labels = [
{ label:
"0s", value: 0 },
{ label:
"1s", value: 1000 },
{ label:
"2s", value: 2000 },
{ label:
"3s", value: 3000 },
{ label:
"4s", value: 4000 },
{ label:
"5s", value: 5000 }
]
;

You then define how the data will be plotted by defining a Plot and assigning the series with a plotter to render it:

var chartPlot = new dojo.charting.Plot(xAxis, yAxis);

chartPlot.addSeries({
data: timeSeries,
plotter: dojo.charting.Plotters.CurvedArea
})
;

This then needs to be rendered into a specific area, so one defines the PlotArea and adds the Plot to it:

var chartPlotArea = new dojo.charting.PlotArea();
chartPlotArea.size = { width: 380, height: 170 };
chartPlotArea.padding = { top: 20, right: 20, bottom: 30, left: 50 };

//Add the plot to the area
chartPlotArea.plots.push(chartPlot);

Finally one needs to create the chart and add the PlotArea to it. The chart also needs to have a container element, which one assigns to the chart.node.

var chart = new dojo.charting.Chart(null, "Example chart", "This is the example chart description");

//Add the plot area at an offset of 10 pixels from the top left
chart.addPlotArea({ x: 10, y: 10, plotArea: chartPlotArea });

//Setup the chart to be added to the DOM on load
dojo.addOnLoad(function()
{
chart.node
= dojo.byId("GraphContainerArea");
chart.render();
});

And voila, you have a graph that looks like this:

Dojo Graph Example

To see the graph in action, take a look at this demo page.

posted on Friday, April 13, 2007 7:14 AM

Feedback

# re: A Simple Dojo Charting Example 4/13/2007 9:04 AM Chas
Very nice article. I have two questions:
1. Can you auto-generate ticks instead of specifying a series of ticks?
2. Are there more advanced line fitting options?

Thanks!

# re: A Simple Dojo Charting Example 4/14/2007 5:29 AM Eden Ridgway
Thanks for the feedback Chas.

1) As far as I'm aware the Dojo framework does not auto-generate the ticks for you. I was thinking of writing a wrapper over the library to remove the hassle of doing these kind of tasks and get it down the the simplicity of PlotKit.

2) The library doesn't appear to have any advanced line fitting options. If one wanted a trend line (logarithmic, moving average, etc) for example, you would implement your own plotter and use that to render the series. Looking at the existing plotter code I don't think it would take that long to do.

# re: A Simple Dojo Charting Example 4/24/2007 10:52 AM Ankush
hi,
It fine but can u please tell me wt i should do to get tooltip on chart values ???

# re: A Simple Dojo Charting Example 4/25/2007 5:42 AM Eden Ridgway
Hi Ankush

As far as I'm aware, the library does not currently support tooltips. You could always modify the Plotters.js files (in the VML and SVG folders) and add title attributes to circles that indicate the various data points. A good starting point can be found in this forum post: http://dojotoolkit.org/pipermail/dojo-interest/2007-March/026178.

Note that the problem described in the post regarding the tooltip not displaying properly in VML can be fixed by setting the z-index on the circle. The code that you would add to the plotters you are using would be:

c.setAttribute("title", data[i].y);
c.style.zIndex = 10;

# re: A Simple Dojo Charting Example 4/30/2007 6:59 PM Aaron
Do you know how to add padding between the axis title and the labels? For example, how can I add padding between "Time Taken" and the number of seconds?

Thanks.

# re: A Simple Dojo Charting Example 5/1/2007 8:34 AM Eden Ridgway
Hi Aaron

Unfortunately the library doesn't support this functionality. To add it you would do something like the following. Go to line 17 of src\charting\Axis.js and add a label offset definition to the axis (note that padding is not a supported style for the svg text element), like this:

this.labelOffset = { left: 0, top: 0 };

Then open up src\charting\svg\Axis.js and modify lines 175 and 176 (this may be off by one) like this:

text.setAttribute("x", x + this.labelOffset.top);
text.setAttribute("y", (coord + (textSize*2) + (textSize/2)) + this.labelOffset.left);

You would then also modify lines 206 and 205 like this:

text.setAttribute("x", x + this.labelOffset.top);
text.setAttribute("y", y + this.labelOffset.left);

Then you'd apply the same logic to the VML Axis implementation.

To then add "padding" between the "Time Taken" and number of seconds tick marks, one would add the following when defining the y-axis:

yAxis.labelOffset = { left: 10, top: 0 };

Don't forget the text is rotated 90 degrees and hence a y offset ends up being translated into an x offset. This is why the left offset is added to the y value.

One catch with this approach is that if you make the offset too large, the labels will no longer be visible on the canvas.

Hope this helps

# re: A Simple Dojo Charting Example 5/30/2007 12:10 PM Ankush
hi,
1. Can u please tell can we have (two) multiple y axis using dojo.?
2. Can we have ar chart above x axis (+ve value ) & below x axis (-ve value ) ???



# re: A Simple Dojo Charting Example 5/30/2007 12:44 PM Ankush
hi,
Can we have data bar chart above x axis (+ve value ) & below x axis (-ve value ) ???

# re: A Simple Dojo Charting Example 5/31/2007 6:48 PM renzo
hi everybody

I want to know how to display (and generate) this graph dynamically using ajax, just passing the type of plott through a HTML form.
when I tried doesn't show absolute anything. how is this dojo.addOnLoad(function() working. somebody can explain me? please. Sorry for my english.

Comments have been closed on this topic.