dojox.gfx on the iPhone

Chris Mitchell of IBM had a few days of free time prior to the Dojo 1.0 release, and so he added Canvas support for dojox.gfx. While Canvas does not offer all of the DOM goodness of SVG, it does have one key features: it works today on the iPhone. While we expect the iPhone’s version of Safari to be updated to support SVG for vector graphics and charting very soon, it allows us to draw and chart natively on the iPhone now:

To include a chart in your Dojo app, first require the following modules:

<script type="text/javascript">
	dojo.require("dojox.charting.widget.Chart2D");
	dojo.require("dojox.charting.themes.PlotKit.orange");
	dojo.require("dojox.charting.themes.PlotKit.blue");
	dojo.require("dojox.charting.themes.PlotKit.green");
	dojo.require("dojox.data.HtmlTableStore");
	
	seriesB = [2.6, 1.8, 2, 1, 1.4, 0.7, 2];
	
	dojo.require("dojo.parser");
</script>

And then in your HTML body, include a widget with the right parameters:

<div dojoType="dojox.charting.widget.Chart2D" 
    style="width: 300px; height: 300px;">
  <div class="axis" name="x" 
    font="italic normal normal 8pt Tahoma"></div>
  <div class="axis" name="y" vertical="true" 
    fixUpper="major" includeZero="true" 
    font="italic normal normal 8pt Tahoma"></div>
  <div class="plot" name="default" type="Areas"></div>
  <div class="plot" name="grid" type="Grid"></div>
  <div class="series" name="Series A" 
     data="1, 2, 0.5, 1.5, 1, 2.8, 0.4"></div>
  <div class="series" name="Series B" array="seriesB"></div>
  <div class="series" name="Series C" 
    store="tableStore" valueFn="Number(x)"></div>
</div>

dojox.gfx now includes support for SVG, VML, Canvas, and Silverlight through one simple, SVG-inspired 2-D and 3-D drawing API!