The document provides an overview of the Dojo Toolkit and its components for graphics and charting. It discusses the major objects in Dojo GFX for creating and manipulating shapes, as well as transformations and rendering. It also covers the major players in Dojo Charting, including plots, axes, data series, and actions for processing events. The document concludes with suggestions for building a simple image viewer and interactive chart as examples.

1. Advanced
Dojo GFX
Eugene Lazutkin, DojoToolkit.org
SVG Open 2009, Mountain View, CA
1

2. Dojo Toolkit: short intro
• Consists of four parts:
• Dojo Base – the most important part. It is included as soon as you
include <script src=”dojo.js”></script>.
• Dojo Core – generic core components (e.g., DnD) and a foundation
for everything else.
• Dijit – core widgets (form elements, layout components) to
assemble UI.
2

3. Dojo Toolkit: short intro
• DojoX – eXtended Dojo, a repository for less frequently needed
functionality.
• Organized by packages.
• Every package includes README listing maintainers, and external
dependencies.
• Can include production and experimental code (see README for
each package).
3

4. Dojo Toolkit: short intro
• Both DojoX GFX and DojoX Charting are housed in DojoX.
• Both are battle-tested, and were used in serious projects.
• SVG and VML renderers were declared of production quality almost
2 years ago.
• Canvas render is actively used in mobile applications.
4

5. Dojo Toolkit: code
• Dojo defines just three top-level objects: dojo, dijit, and dojox.
Everything else is in them.
• You don’t need to follow this example for simple projects. I
frequently define short aliases, for example:
var d = dojo, g = dojox.gfx;
• Including modules are easy:
dojo.require(“dojox.gfx”);
5

6. Dojo Toolkit: code
• Module names follow a simple convention:
• Examples: dojox.gfx is in dojox/gfx.js, dijit.layout.ContentPane is in
dijit/layout/ContentPane.js, and so on.
• Exception: Dojo Base attaches functions directly to “dojo”, but actual
code is in dojo/_base/.
• Examples: dojo.style is in dojo/_base/html.js, dojo.declare is in dojo/
_base/declare.js.
6

7. Dojo Toolkit: docs & help
• Presently docs are hosted at Dojo Campus:
• http://docs.dojocampus.org/
• Usually names are directly reflected in URL:
• Docs for dojox.gfx are at http://docs.dojocampus.org/dojox/gfx
• See the pattern?
7

8. Dojo Toolkit: docs & help
• More “interactive” help:
• Mailing lists are very helpful.
• Syndicated by Gmane, Nabble, Google Groups.
• http://stackoverflow.com/ is frequented by users and contributors.
• More “immediate” help:
• #dojo channel @ freenode
8

9. Dojo Toolkit: docs & help
• Do not overlook “reading code”!
• In most cases Dojo code is very readable and thoroughly
commented.
• It is a good way to learn how things work, and what API is presented.
• You can spot some useful tricks from the code.
• “Improving code” starts with “reading code”. If you spot a problem,
open a ticket!
9

10. Dojo Toolkit: docs & help
• Dojo’s Trac is at http://bugs.dojotoolkit.org/
• Register your name at dojotoolkit.org.
• Use Trac if you found a bug, or have a good idea for an enhancement.
10

11. Dojo Toolkit: docs & help
• Trac hints:
• Search Trac to search for a problem before opening a ticket.
• Attach files rather than pasting them inline.
• If you want to post a snippet, use code formatting {{{code}}}.
• Try to distill a problem into a minimal test program.
• Attach patches. Tickets with patches are fast-tracked.
11

12. Dojo GFX
The crash course
12

13. Dojo GFX: major players
• The package: dojox.gfx
• The proper renderer will be automatically selected.
• You can change the detection order.
• dojox.gfx.Surface
• A rectangular container for shapes.
• Usually it is anchored at <div>.
13

14. Dojo GFX: shapes & groups
• Shapes: Rect (with rounded corners), Circle, Ellipse, Line, Polyline,
Path, Image, Text, TextPath (experimental).
• dojox.gfx.Group is a special shape, which is used to group other
shapes.
• Its children can be enumerated.
• It can be transformed as whole.
• It can contain other groups.
14

15. Dojo GFX: stroke & fill & font
• Stroke defines how to outline a shape.
• You can specify: color, thickness, style (e.g., solid or dash), caps, and
joints.
• Fill defines how shape’s interior is going to be filled.
• Supported styles: solid color, tiled patterns, linear and radial gradient.
• Font is used for Text and TextPath shapes.
15

16. Dojo GFX: color
• dojo.Color is used to specify all colors.
• Any valid CSS3 colors are supported.
• CSS named colors are supported with dojo.colors module.
• Opacity is supported as well.
• Warning:VML doesn’t support opacity in fills.
16

17. Dojo GFX: transformations
• dojox.gfx.Matrix2D is used to transform shapes.
• Linear 2D transformations are supported: scaling, translation,
rotation, skewing, and so on.
• Practically all matrix operations are provided: multiply matrices,
invert, transform points, even eigenvalue decomposition.
• For convenience “at” versions are provided too, e.g., rotateAt()
rotates around specified center.
17

18. Dojo GFX: more details
• All shapes are organized using an indirect Z-index.
• You can “move to front” and “move to back” them within a
container.
• You can move the whole container.
• Shapes can be added, removed, and transferred between containers.
• Events are supported with familiar shape.connect() and
shape.disconnect().
18

19. Dojo GFX: move & fx
• dojox.gfx.move simplifies grab-drag-drop operations.
• dojox.gfx.fx provides animation primitives: animateStroke, animateFill,
animateFont, and, most useful, animateTransform.
• It supports all matrix-producing functions of dojox.gfx.matrix.
• Special operation is supported: “original”, which means the original
matrix (before animation starts).
• A chain of such operations can be specified.
19

20. Dojo GFX: selecting renderers
• Selecting specific renderers is easy: just use gfxRenderer parameter
of dojo.config:
• djConfig = {gfxRenderer: “svg,vml”}.
• It defines the list of renderers to try.
• First renderer will be tried first.
• This way you can include/exclude renderers and their priority.
20

21. Image Viewer
Hacking session
21

22. Simple image viewer
• Let’s base it on public pictures available on Flickr.
• We can look up how to get images in dojo/tests/dnd/
flickr_viewer.html
• Simple functionality: preview with thumbnails, click on an image, and it
shows it big.
• We may need preload big images to make our viewer snappy.
• If time permits, let’s animate all actions.
22

23. Dojo Charting
The crash course
23

24. Charting: major players
• The package: dojox.charting.
• Built on dojox.gfx, which makes it virtually browser-independent.
• dojox.charting.Chart2D is the main object.
• Serves as a container for plots, axis, and data series.
• Uses a theme to render components, and actions to process events.
24

25. Charting: plot
• dojox.charting.plot2d namespace hosts Plot objects:
• Areas, Lines, Default (same as Lines), StackedAreas, StackedLines,
Bubble, Candlesticks, Markers, MarkersOnly, OHLC (open-high-
low-close chart), Pie, Scatter,
• Bars, ClusteredBars, StackedBars
• Columns, ClusteredColumns, StackedColumns
• Grid
25

26. Charting: axis
• dojox.charting.axis2d namespace hosts Axis objects:
• Default: linear axis with 3-level ticks, and 2-level labels.
• The Grid plot reuses ticks for grid lines.
• It is possible to create plots without one or both axes.
• Axes can be shared between plots.
• Axes can be attached to all four sides. No stacking yet.
26

27. Charting: data series
• An array of numbers can be used with most plots.
• Bubble, Candlesticks, OHLC cannot use simple numbers.
• An array of objects can be used to trigger an enhanced processing.
• Presently (10/1/2009) bar- and column-based charts cannot use
objects. It will be fixed soon. Hopefully in time for 1.4.
27

28. Charting: actions
• Actions are used to process events on visual objects representing
data points.
• Supported events: onmouseover, onmouseout, onclick, onplotreset
(synthetic event, used for updating a plot).
• Common infrastructure, which simplifies creating actions.
• Hosted by dojox.charting.action2d.
28

29. Chart Events
Hacking session
29

30. Simple interactive chart
• Let’s overlap two different plots on the same chart.
• They will share the X axis, and have different Y axes.
• We implement actions (tooltip, magnify, highlight).
• If time permits, let’s add our own action on mouse click.
30