Data Data Visualization Visualization

with Dojo toolkit with Dojo toolkit Gu Yi, HeGu Yi, He

Apache Asia Roadshow 2010Apache Asia Roadshow 2010

AgendaAgenda

Why JavaScript?Why JavaScript? Getting started with Dojo ChartingGetting started with Dojo Charting DashboardsDashboards Drawing with Dojo GFXDrawing with Dojo GFX Embracing the next new Tech WaveEmbracing the next new Tech Wave Further ReadingFurther Reading

Why JavaScript?Why JavaScript?

Rich Internet ApplicationsRich Internet Applications FlexFlex SilverlightSilverlight JavaFXJavaFX JavaScript/CSS/HTMLJavaScript/CSS/HTML

Getting Started with Dojo Getting Started with Dojo ChartingCharting

Our first Pie chartOur first Pie chart

IE / Firefox / Safari / Chrome compatible!

Getting Started with Dojo Getting Started with Dojo ChartingCharting

Easy to createEasy to create Requiring Charting ClassesRequiring Charting Classes Two ways to playTwo ways to play

Declarative Chart CreationDeclarative Chart Creation Programmatic Chart CreationProgrammatic Chart Creation

Chart Animations, Legends, and Chart Animations, Legends, and ThemesThemes

Getting Started with Dojo Getting Started with Dojo ChartingCharting

Declarative / Programmatic Chart Declarative / Programmatic Chart CreationCreation

DeclarativeDeclarative

ProgrammaticProgrammatic

Getting Started with Dojo CharGetting Started with Dojo Chartingting

Customize the chartCustomize the chart The effects can be “added” onto the chaThe effects can be “added” onto the cha

rt like pluginsrt like plugins We can finely control the behavior and apWe can finely control the behavior and ap

parence of the chartparence of the chart

Getting Started with Dojo Getting Started with Dojo ChartingCharting

Abundant amount of chart typesAbundant amount of chart types

DashboardsDashboards

Drawing with Dojo GFXDrawing with Dojo GFX

Need to invent a new chart type?Need to invent a new chart type? Need to draw freely?Need to draw freely? Dojo GFX is a cross-platform vector graphics Dojo GFX is a cross-platform vector graphics

API you are looking forAPI you are looking for SVG (Firefox 1.5-3.6, Safari(Webkit) 3.0, Opera 9.0,SVG (Firefox 1.5-3.6, Safari(Webkit) 3.0, Opera 9.0,

Chrome(Webkit), iPhone Safari 2.1) Chrome(Webkit), iPhone Safari 2.1) VML (IE 6-8)VML (IE 6-8) Silverlight (wherever it is supported by Microsoft)Silverlight (wherever it is supported by Microsoft) Canvas (Firefox 2.0-3.6, Safari 3.0 including iPhonCanvas (Firefox 2.0-3.6, Safari 3.0 including iPhon

e Safari 1.x & 2.x, Opera 9.0)e Safari 1.x & 2.x, Opera 9.0)

Drawing with Dojo GFXDrawing with Dojo GFX

Dojo GFX loosely follows SVG as the Dojo GFX loosely follows SVG as the underlying model.underlying model. Every visual presentation created with Dojo GFX Every visual presentation created with Dojo GFX

begins by creating a begins by creating a SurfaceSurface object which will object which will serve as the visual rectangular container for serve as the visual rectangular container for shapes.shapes.

In order to draw on a Surface, you'll need to create In order to draw on a Surface, you'll need to create ShapeShape objects and attach the shapes to a Surface. objects and attach the shapes to a Surface.

GFX also has the concept of a GFX also has the concept of a GroupGroup, which is a , which is a pseudo-shape. Groups combine other shapes pseudo-shape. Groups combine other shapes (which can include other groups), and can be used (which can include other groups), and can be used to apply transformation to a group.to apply transformation to a group.

Drawing with Dojo GFXDrawing with Dojo GFX Supported ShapesSupported Shapes

Rectangle (optionally with rounded corners)Rectangle (optionally with rounded corners) CircleCircle EllipseEllipse LineLine Polyline/polygonPolyline/polygon Path (the most versatile shape) Path implements Path (the most versatile shape) Path implements

the full SVG path language.the full SVG path language. ImageImage TextText TextPathTextPath

Drawing with Dojo GFXDrawing with Dojo GFX DemoDemo

Clock Dojo guyChart Animation

Embracing the next new Embracing the next new Tech WaveTech Wave

HTML5 (Canvas)HTML5 (Canvas) Dojo GFX has already adopt canvas as it grDojo GFX has already adopt canvas as it gr

aph engine.aph engine. Set gfxRenderer=true to force Dojo GFX to Set gfxRenderer=true to force Dojo GFX to

use canvas.use canvas.

Canvas SVG VML Silverlight

Dojo GFX

Dojo Charting

Embracing the next new Tech Embracing the next new Tech WaveWave

CSS3CSS3

Safari/Chrome/FireFox 3.6Opera 10.53 Safari (iPhone OS 3.1)

IE9 beta IE8 IE7 IE6

Doraemon (http://knb.im/css3/)

Embracing the next new Tech Embracing the next new Tech WaveWave

MobileMobile

Switch

List

Further ReadingFurther Reading

dojotoolkit.orgdojotoolkit.org http://dojotoolkit.orghttp://dojotoolkit.org

IBM developerWorksIBM developerWorks http://http://www.ibm.com/developerworkswww.ibm.com/developerworks//

Dojo Toolkit SDKDojo Toolkit SDK