Home ›

Dojo, Now with Drawing Tools!

Issue 178

From Issue #178
February 2009

Feb 01, 2009  By Matthew Russell
 in
Internalizing Dojo's “write once, deploy anywhere” philosophy, Dojo's gfx (pronounced “g-f-x” or sometimes “graphics”) library packs a powerful 2-D drawing API that's capable of plugging in to an arbitrary renderer. Out of the box, it works with Canvas, Silverlight, SVG and VML, so regardless of which browser your application is ultimately viewed within, gfx has you covered.

Listing 5. Preview of Dojo's Charting API

//////////////////////////////////////////////////////
// This function demonstrates the general form of
// putting Dojo's charting API built on top of 
// gfx to use. Pass in a node, customize the chart,
// and let Dojo take care of the rest
//////////////////////////////////////////////////////
new dojox.charting.Chart2D(node))
    .setTheme(dojox.charting.themes.PlotKit.blue)
    .addPlot("default", {
        type: "Default", 
        lines: true, 
        markers: true, 
        tension: 2
    })
    .addAxis("x", {
        min: 0, 
        max: 6, 
        majorTick: { stroke: "black", length: 3 }, 
        minorTick: { stroke: "gray", length: 3 }
    })
    .addAxis("y", {
        vertical: true, 
        min: 0, 
        max: 10, 
        majorTick: { stroke: "black", length: 3 }, 
        minorTick: { stroke: "gray", length: 3 }
    })
    .addSeries("Series A", [
        { x: 0.5, y: 5 }, 
        { x: 1.5, y: 1.5 }, 
        { x: 2, y: 9 }, 
        { x: 5, y: 0.3 }
    ])
    .addSeries("Series B", [
        { x: 0.3, y: 8 }, 
        { x: 4, y: 6 }, 
        { x: 5.5, y: 2 }
    ])
    .render()
    ;

Figure 9. An example of the charts you can draw with Dojo—no Flash required!

Figure 10. Another Example Chart Drawn with Dojo

Although only a teaser, it's worthwhile to note the charting API focus on charting—not on raw drawing operations—so you can focus on the semantics of the task at hand instead of the implementation details associated with lower-level operations. In general, you simply provide some data that says what kind of chart you'd like, how to customize the axes and pass in the series data. Setting up event handlers, legends and other related things all work much the same way.

There's Plenty More Where That Came From

2-D drawing is an enormous topic in and of itself, and no single article could cover all the nooks and crannies adequately. This article is designed to give you an idea of just how easy Dojo makes 2-D for the Web, which hopefully motivates you to start experimenting with the examples and check out the API docs.

Resources

Full Drag-and-Droppable Dominoes Code (Listing 4): ftp.linuxjournal.com/pub/lj/issue178/10308.tgz

“Dojo: the JavaScript Toolkit with Industrial-Strength Mojo” by Matthew Russell, LJ, July 2008: www.linuxjournal.com/article/9900

The Dojo Toolkit: dojotoolkit.org

The gfx API Documentation: docs.google.com/View?docid=d764479_1hnb2tn

Reflection with gfx: dojotdg.com/2008/09/a-simple-degradable-reflection-widget

Overview of Transformation Matrices: en.wikipedia.org/wiki/Transformation_matrix

Custom Fonts with gfx: www.sitepen.com/blog/2008/09/08/custom-fonts-with-dojoxgfx

Dojo: The Definitive Guide (O'Reilly, June 2008): oreilly.com/catalog/9780596516482

Dojo: The Definitive Guide (Official Online Compendium): dojotdg.com

Dojo Campus: dojocampus.org

Dojo Key Links: dojotoolkit.org/key-links

Dojo Foundation: dojofoundation.org

Matthew Russell is an open Web technology consultant and the author of Dojo: The Definitive Guide (O'Reilly, June 2008).

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

Please post missing file 10308.tgz

Anonymous's picture
Submitted by Anonymous (not verified) on Wed, 08/25/2010 - 01:01.

When I try this link in the resources:

ftp://ftp.linuxjournal.com/pub/lj/issue178/10308.tgz

It's a bad link. I found this
ftp://ftp.linuxjournal.com/pub/lj/listings/issue178/README178

10042.tgz -- Web 2.0 Development with the Google Web Toolkit
Federico Kereki

10308.tgz -- Dojo, Now with Drawing Tools!
Matthew Russell

but this file is missing: 10308.tgz

very interesting, good for

Anonymous's picture
Submitted by Anonymous (not verified) on Wed, 07/01/2009 - 02:52.

very interesting, good for gfx beginner just like me. thanks!

where is the download for listing 4

forestial's picture
Submitted by forestial on Thu, 02/12/2009 - 23:16.

Trying to download the code from listing 4 from the ftp link in Resources. I get a "550 Failed to change directory" error.

Tried browsing the ftp site, but there seems to be nothing there for this issue (178).

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState