Ext 4 Charting and
Visualization

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

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

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

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

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

DrawComponent Sample

Draw Component Sample

HTML5
Standards
Based
Resolution Independence

Ext Charts

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

Simple Pie Chart

Simple Pie Chart

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

Label Options
Full Font styling
Orientation
Rotation
Positioning
Renderers

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

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

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

Linear Gradient Sample

Pie Properties
angleField
lengthField
Stacking
Pie or Donuts?

Styled Pie Chart

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

Series Renderers

Styled Pie Chart

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

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

Axis Sample

Column Sample

Column Charts

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

Column/Bar Sample

Grouped/Stacked
Bar/Column

Line Charts
Markers
Smoothing
Fills
Stacking for area charts

Line Charts

Stocks Sample

Scatter Charts

Mixed Series

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

Thank You!
@jamieavins