| | {code:html}http://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/docs/webcontent/uuid/40d903f9-0b01-0010-4fab-c...
| http://www.sdn.sap.com/irj/servlet/prt/portal/prtroot/docs/webcontent/uuid/c73003f9-0b01-0010-aa8b-8... |
You might remember my earlier Sign of the times{code} 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 (From the Grumpy Old Man: Hoy en el mundo), 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 (The Great Library Misery), MochiKit (http://mochikit.org/) with the charting library Plotkit (http://www.liquidx.net/plotkit/) on top of it. As such it’s a rather straight forward thing. First initialise the scripts: Plotkit needs a canvas to draw on. See this web log (Blank Canvas) for details on the tag. 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 (http://www.maani.us/xml_charts/) by maani.us. These guys have lots of nice stuff like charting for PHP, Gauge charts, etc.*Conclusion* As you can see, one can implement charts easily with little effort. “Why didn’t you use it in SDN World (From the Grumpy Old Man: Hoy en el mundo) 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. 
7 Comments
