Ext JS provides libraries for charting and visualization including Raphaël, CSS3 Pie, and InfoVis. It includes engines for SVG, VML, and Canvas rendering. The Surface class renders primitives, text, images, and gradients. Sprites are drawing elements that normalize differences between engines and support attributes, events, transforms, and animation. DrawComponents extend Ext components to provide customizable engine preferences and participate in layouts. Charts include series, axes, legends, and callouts. Supported chart types include pie, bar, column, line, area, and scatter plots. Charts support gradients, labels, tooltips, highlighting, stacking, and custom renderers.

2. Ext 4 Charting and
Visualization

3. Dmitry
Baranovskiy
- Raphaël -
Jason Johnston
- CSS3 Pie -
Nicolas
Belmonte
- InfoVis -

4. Ext Draw
Working with Vector Graphics
Surface
SVG Engine VML Engine Canvas Engine
Sprite

5. Ext.draw.Surface
Rendering of primitives: Ellipses, Rectangles, Complex Paths
Text
Images
Gradients

6. Ext.draw.Sprite
Abstracted drawing elements
Normalizes di erences between engine API syntax
Attributes
Event support (extends Observable)
Transforms (Rotate, Translate, Scale)
Animation supported through Ext.fx
SpriteComposites

7. Ext.draw.DrawComponent
Extends Ext.Component
Engine preference via feature detection
Customizable engine preference order
Layout participation

8. DrawComponent Sample

9. Draw Component Sample

10. HTML5
Standards
Based
Resolution Independence

11. Ext Charts

12. Working with Charts
DrawComponent
Chart
Store Axis Series Legend Callout
Pie Bar/Column Line/Area Scatter

13. Simple Pie Chart

14. Simple Pie Chart

15. Series Properties
Label configuration
Animation e ects
Shadow e ects
Highlighting e ects
Gradients
Legends
Callouts
Renderers

16. Label Options
Full Font styling
Orientation
Rotation
Positioning
Renderers

17. Legends
Positioning: top, bottom, left, right, floating
Vertical/Horizontal stacking
Styling using same Label API

18. Callouts
Tooltips on steroids
Series/Chart highlighting
Axis selection - pan/zoom

19. Gradients
Shared across all series
Accessed by reference id
Multiple color support
Linear gradients
Multiple opacity stop support
Radial gradients

20. Linear Gradient Sample

21. Pie Properties
angleField
lengthField
Stacking
Pie or Donuts?

22. Styled Pie Chart

23. Series Renderers
Similar concept to Grid Renderers
Customize any property
Return new set of properties
Available to all series

24. Series Renderers

25. Styled Pie Chart

26. Cartesian Charts
Axis support
Bar/Column, Line/Area, Scatter Point
Mix and Match

27. Axes
Numeric, Category and Time
Align to top, bottom, left, right
Bind each axis to di erent data sets
Ellipsis support
Gridline support
Full label configuration support

28. Axis Sample

29. Column Sample

30. Column Charts

31. Column/Bar Properties
Assign an array of fields to add grouping
Stack flag to change to stacking

32. Column/Bar Sample

33. Grouped/Stacked
Bar/Column

34. Line Charts
Markers
Smoothing
Fills
Stacking for area charts

35. Line Charts

36. Stocks Sample

37. Scatter Charts

38. Mixed Series

39. Beyond Charting
Full Graphical Dashboards
Graphic Display Gauges
Heatmaps
Organizational Charts
Network Diagrams
Interactive Maps and Location Components
Venn Diagrams

40. Thank You!
@jamieavins