Wednesday, November 8th, 2006

Dojo Charting Engine Released

Category: Component, Dojo, JavaScript, Library

<p>The Dojo Toolkit keeps adding packages (thankfully they have package management too!). Today, “Greenplum and SitePen announced the contribution of the new Charting engine to the Dojo Toolkit. Originally designed as the foundation for the Greenplum Monitor–a browser-based database monitoring application to be released later this year–the Charting engine is a cross-browser way of creating very complex charts easily, that can be updated on a regular basis.”

Features

  • A Chart can have multiple “PlotAreas” (the actual charts)
  • A PlotArea can contain multiple Plots (x/y axis + N data series)
  • Data series are bound at run-time to a dojo.collections.Store object, with flexible field bindings.
  • An Axis can have custom labeling schemes.
  • See below for plot types.
  • Each plotter can take a function at render, which will be called for every data point in that series–the node representing the point is passed, as well as the entire source object the point represents.
  • PlotAreas provide a facility for assigning colors to series (basically it has a built in HSV generator)
  • All browsers but WebKit are supported in full.
  • Rendering can be granular; right now the test only runs rendering once, but it was designed to all of constant rendering if needed.
  • A range of data points can be plotted (instead of the full data set) if so desired.
  • Trend methods are available for data analysis (but no specific plotters are built for it yet).

The test page has it all:

Dojo Charting

You can see that you end up with code like this:

javascript
< view plain text >
  1. dojo.require("dojo.collections.Store");
  2. dojo.require("dojo.charting.Chart");
  3. dojo.require('dojo.json');
  4.  
  5. //      our sample data for our line chart.
  6. var json = [
  7.         { x: 0, y: 110, size:20, x2:20, high:110, low: 80, open:90, close:96 },
  8.         { x: 10, y: 24, size:4, x2: 25, high:56, low: 43, open:43, close:54 },
  9.         { x: 15, y:63, size:32, x2: 30, high: 100, low: 40, open:56, close: 96 },
  10.         { x: 25, y: 5, size:13, x2: 35, high: 40, low: 36, open:40, close:36 },
  11.         { x: 40, y: 98, size:7, x2: 40, high: 86, low: 66, open: 80, close: 70 },
  12.         { x: 45, y: 54, size:18, x2: 45, high: 50, low: 0, open: 42, close: 4 }
  13. ];      
  14. var store = new dojo.collections.Store();
  15. store.setData(json);
  16.  
  17. //      define the chart.
  18. var s1 = new dojo.charting.Series({
  19.         dataSource:store,
  20.         bindings:{ x:"x", y:"y", size:"size" },
  21.         label:"The Main Series"
  22. });
  23.  
  24. // ... much much more

Related Content:

Posted by Dion Almaer at 10:28 am
26 Comments

++++-
4 rating from 172 votes

26 Comments »

Comments feed TrackBack URI

And bonus points for using SVG in this package to render the graphics, how cool. This adds to dojo’s usage of SVG in the recent dojo.gfx package too.

Comment by Antoine Quint — November 8, 2006

no offense, but this looks like excel 97. I’ll stick to fusion charts and xml.

Comment by Snootz — November 8, 2006

Wow! Dojo becomes very big, very fast. Unlike other frameworks who seem to sleep for a while :)

Now it becomes very frustrating when having the choice which to use…

Comment by Georges Jentgen — November 8, 2006

This is cool. Dojo is definitely a solidly engineered toolkit and it apparently keeps getting better.

I have personally “drank the Kool-aid” with Prototype.js, Scriptaculous, along with DWR. DWR and Prototype are able to work together (so we can have the functionality of both libraries), but to my understanding, Prototype and Dojo cannot (b/c Prototype extends the base Javascript object, and this conflicts with Dojo).

Are there any plans, or possibilities, to enable Dojo to work with Prototype? I would love to make use (and even transition to Dojo), but don’t want to ditch Prototype, as it has made me very productive.

Thanks for the awesome work and any info regarding this point. It would be great if the open source js/ajax toolkits could work together.

Comment by Mark Holton — November 8, 2006

Prototype doesn’t mess with Object.prototype anymore.

Comment by beppu — November 8, 2006

Since which release?

Comment by Mark Holton — November 8, 2006

Prototype version 1.4 no longer extends Object.prototype.

Comment by John — November 8, 2006

Good to know we can integrate this great library with Prototype, DWR also.
Thanks, John and beppu.

Comment by Mark Holton — November 8, 2006

Mark: Dojo should work in the same page as Prototype. We work very hard to try to not blow up in the face of what others may be doing. Give it a try! I think you’ll be able to get the best of both worlds if that’s what you’re looking for.

Regards

Comment by Alex Russell — November 8, 2006

Dojo Charting Engine Released

This is really cool and really proved how Ajax application can be beautiful, practical, and easy to implement.
The charting engine used to be either done on the server side that creates images, or done with flash which neither of them really played wel…

Trackback by Programming in the State of 70% Drunkeness — November 8, 2006

Many thanks, Alex. I will definitely be giving it a spin soon. This is great news.

By the way, congrats on the JotSpot successes — well deserved and inspiring.

(as an aside, can you give me a prime reason to start writing Python code? I’m trying to understand what I can gain from having that in the toolbox… and ‘word on the street’ is that you have written a ton of Python code)

best-

Comment by Mark Holton — November 8, 2006

I recently found a very interesting website:
http://alreadylinked.com/
There you can purchase ad space for your Blog etc.

Comment by jack — November 9, 2006

Nice, but not production-ready without full WebKit support.

Comment by Anonymous Coward — November 9, 2006

If it uses SVG for rendering, to what does it fall back on non-SVG-browsers?

Comment by Maarten Manders — November 9, 2006

VML for Internet Explorer, progress on the latest WebKit nightlies is getting closer and closer (thier progress, http://nightly.webkit.org).

Comment by Tom Trenka — November 9, 2006

Nice… graphics are nice and smooth, server load should be low… now, if I could only copy and paste the chart into inkscape or OOo. I tried dragging it onto my gnome desktop and it created a text file with some numbers in it.

Oooh, bonus! just tried and (in FF2) print preview works exactly as expected.

Comment by Matt Nuzum — November 9, 2006

hmm it looks pretty but I wonder why they call it ‘realtime chart’.

Comment by JB — November 9, 2006

I use JChat servelts for my java web apps by the way, it works fine, But I am also hunting for more real time Ajax charts implementation which I have’nt really seen yet.

Comment by JB — November 9, 2006

[...] Ajaxian: Dojo Charting Engine Released Wow. [...]

Pingback by Filter for 8/11 2006 - Felt — November 10, 2006

JB, because there are also methods available to update and animate the charts in real-time. For example, a system resource monitor line graph.

Comment by Dylan Schiemann — November 11, 2006

[...] 剛才在大神的 blog 上看到這篇文章,現在已經有了可以用 JavaScript 畫圖表(chart)的函式庫了!(測試頁在此)除了感嘆 JavaScript 愈來愈 powerful 之外,也再一次拿 Firefox 2.0 及 Opera 9.02 來比較 performance,結果很明顯 Opera 又再一次證明它的效能卓越。但值得注意的是,即便我在 Intel iMac 上用 Firefox 2 來測還是會有一點點 lag 的感覺(在 Opera 9 上很順),請 Firefox 再多加油吧 XD [...]

Pingback by Chart with JavaScript at 偽京阪之旅一十二週 — November 12, 2006

Dojo Charting Engine Released

The Dojo Toolkit keeps adding packages (thankfully they have package management too!). Today, “Greenplum and SitePen announced the contribution of the new Charting engine to the Dojo Toolkit. Originally designed as the foundation for the Greenplum Mon…

Trackback by Anonymous — November 12, 2006

links for 2006-11-13

Dojo Charting Engine Released (tags: javascript ajax graphics dojo library) 11月2号搭载酷睿2çš„MacBook Pro全国首发,到货及大图欣赏 (tags: Apple mac notebook)…

Trackback by Plod — November 13, 2006

Maybe port FusionCharts FREE (http://www.fusioncharts.com/free) to DOJO? What say?

Comment by Ravi Kumar — April 9, 2007

good , thanks , go on.

Comment by chinacodegear — December 26, 2007

Guys – where is the example gone? Can anyone point me to where this has been moved to?

Comment by jaguarg — January 30, 2009

Leave a comment

You must be logged in to post a comment.