Download as PDF, PPTX
Uploaded bySencha
Charting & Data Visualization in Ext JS 4
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.
More Related Content
Similar to Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
- 2. Ext 4 Chartingand 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 Normalizesdi 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 preferencevia feature detection Customizable engine preference order Layout participation
- 8.
- 9.
- 10. HTML5 Standards Based Resolution Independence
- 11.
- 12. Working with Charts DrawComponent Chart Store Axis Series Legend Callout Pie Bar/Column Line/Area Scatter
- 13.
- 14.
- 15. Series Properties Label configuration Animatione ects Shadow e ects Highlighting e ects Gradients Legends Callouts Renderers
- 16. Label Options Full Fontstyling 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/Charthighlighting Axis selection - pan/zoom
- 19. Gradients Shared across allseries Accessed by reference id Multiple color support Linear gradients Multiple opacity stop support Radial gradients
- 20.
- 21.
- 22.
- 23. Series Renderers Similar conceptto Grid Renderers Customize any property Return new set of properties Available to all series
- 24.
- 25.
- 26. Cartesian Charts Axis support Bar/Column,Line/Area, Scatter Point Mix and Match
- 27. Axes Numeric, Category andTime Align to top, bottom, left, right Bind each axis to di erent data sets Ellipsis support Gridline support Full label configuration support
- 28.
- 29.
- 30.
- 31. Column/Bar Properties Assign anarray of fields to add grouping Stack flag to change to stacking
- 32.
- 33.
- 34.
- 35.
- 36.
- 37.
- 38.
- 39. Beyond Charting Full GraphicalDashboards Graphic Display Gauges Heatmaps Organizational Charts Network Diagrams Interactive Maps and Location Components Venn Diagrams
- 40. Thank You! @jamieavins