DojoのCharting Engineのソースコードを眺める

1週間ほど前にAjaxianで知ったDojoのCharting Engine。
Ajaxian » Dojo Charting Engine Released

デモは以下。
http://archive.dojotoolkit.org/nightly/tests/charting/test_engine.html

折れ線グラフが描かれていて、画像ではないのですごいなぁ、と思ったので何で動いているのかちょっと調べてみました。

Dojoのサイトから0.4をダウンロード。解凍してディレクトリ名をdojoにすると

dojo/tests/charting/test_engine.html

に先ほどのデモと同じファイルがある。HTMLのソースを見るとdojo/dojo.jsが呼ばれている。このdojo.jsのソースは何やら変数名等が読みづらくなっている。

dojo.require(”dojo.charting.Chart”);

などで別ファイルのソースが呼び出されている。dojo.hostenv.getTextの中でdojo.hostenv.getXmlhttpObjectが呼び出されているので外部ファイルを呼び出す仕組みはAjax。で、取得したテキストをevalしている。

dojo/src/charting/Chart.js辺りが呼び出されていて、Firefoxの場合はdojo/src/charting/svg/がメインになる模様。これらのソースはコメントもインデントもあって読める。

JavaScript Cake Tutorials and Scripts

Firefoxのこれを使うとSVGのソースがHTMLの中で出力されているのがわかる。

<svg height="170" width="700" id="dojo-charting-plotarea-0">
<defs>
<clipPath id="dojo-charting-plotarea-0-clip">
<rect height="120" width="630" y="20" x="50">
</rect>
</clipPath>
</defs>
...

さしあたって用途はないのですが、Dojoのスゴさの片鱗が見れました。