You might remember my earlier web log concerning the generation of bar codes via an Object-Oriented Graph creating library for PHP, called JPGraph. As you might remember, this library is also eminently suitable for creating all kinds of charts.
Being a PHP library, it’s rather obvious that – in a web context – the charting engine runs on the server side which creates (mostly) a graphical image for that chart. But what if you need to create charts on the client side? In the search for such a solution for our well known SDN World, Valery and I have been trying things out.

Kit
The first attempt was based on the Javascript library, already covered in my earlier web log, MochiKit with the charting library Plotkit on top of it.
As such it’s a rather straight forward thing.

First initialise the scripts:

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

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

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

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

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

 

Plotkit needs a canvas to draw on. See this web log for details on the tag.

<div><canvas id="my_canvas" height="200" width="200"></canvas></div> 

 

Create a chart, in this case a line chart

var layout = new Layout("line");

 

Add the data to a set

 layout.addDataset("demo",  [[10, 20], [15, 30] , [20, 40])

 

Things need to be calculated

layout.evaluate();

The chart needs to be drawn on the canvas

var canvas = MochiKit.DOM.getElement("my_canvas");

 

Link things together

var plot = new PlotKit.SweetCanvasRenderer(canvas, layout);

 

And finally render stuff

plot.render();

 

Flash
As you can see, it isn’t that complicated at all. We didn’t stop at this solution though. Despite the nice end result, it wouldn’t run on the preferred platforms. On top of that, it would make the application much heavier, which was certainly to be avoided. The next obvious step was to have a look for an alternative in Flash. I found a really nice solution in XML/SWF by maani.us. These guys have lots of nice stuff like charting for PHP, Gauge charts, etc.
The nice thing about this solution is that everything has a very small footprint. One only needs to include a Flash object and refer to an XML file. Within this XML file, one not only provides the data, but also the configuration of the chart. Let’s have a look at how things are done and examine a typical XML file.
Let’s pretend we want to make a chart for this data and put it in a pie chart.

	US	India	Germany	UK	Australia	Belgium	Netherlands	Spain	Canada	Other
	100	87	48	13	13	12	11	8	7	71

 

First is of all we define the chart

<chart>

 

Then we provide the data

<chart_data>

 

We define a row for the labels.

<row>

 

The first cell is for labelling the other axis.

<null/>

 

Then the labels follow

<string>US</string>

<string>India</string>

…

 

And we end that row

</row>

 

We start another one

<row>

 

Since we don’t have axis in the pie chart, we don’t have labels for it

<string/>

 

The data follows

<number>100</number>

<number>87</number>

…

 

We end that row again

</row>

 

And the data definition

</chart_data>

 

The rest is configuration stuff

<chart_grid_h thickness="0"/>

<chart_pref rotation_x="60"/>

<chart_rect x="175" y="0" width="350" height="350" positive_alpha="0"/>

 

I like the spinning option very much whereby the pie parts turn in the chart.

<chart_transition type="spin" delay=".5" duration="0.75" order="category"/>

<chart_type>3d pie</chart_type>

<chart_value color="000000" alpha="65" font="arial" bold="true" size="10" 
       position="inside" prefix="" suffix="" decimals="0" separator="" 
       as_percentage="true"/>

<legend_label layout="horizontal" bullet="circle" font="arial" bold="true" 
       size="12" color="ffffff" alpha="85"/>

<legend_rect x="0" y="45" width="50" height="210" margin="10" fill_color="ffffff" 
       fill_alpha="10" line_color="000000" line_alpha="0" line_thickness="0"/>

<legend_transition type="dissolve" delay="0" duration="1"/>

The colouring of the pie parts can be defined via:

<series_color>

<color>5D7CBA</color>

<color>62509B</color>

..

</series_color>

Finally, we end the chart definition.

</chart>

Conclusion

As you can see, one can implement charts easily with little effort. “Why didn’t you use it in SDN World then?” you might ask. Despite being a perfect solution, the Flash chart didn’t have any javascript interface for passing the data. The data was already there and we wanted to avoid having to retrieve the data a second time via an XML feed and thereby putting unnecessary stress on the server. Therefore a home brew Flash (by Valery and his team) was the most suitable solution in our case.

 

The World According to SDN. Put yourself on the SND world map and earn 25 points. Spread the wor(l)d!