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