More Related Content

Similar to Charting & Data Visualization in Ext JS 4(20)

More from Sencha(20)


Charting & Data Visualization in Ext JS 4

  1. Ext 4 Charting and Visualization
  2. Dmitry Baranovskiy - Raphaël - Jason Johnston - CSS3 Pie - Nicolas Belmonte - InfoVis -
  3. Ext Draw Working with Vector Graphics Surface SVG Engine VML Engine Canvas Engine Sprite
  4. Ext.draw.Surface Rendering of primitives: Ellipses, Rectangles, Complex Paths Text Images Gradients
  5. 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
  6. Ext.draw.DrawComponent Extends Ext.Component Engine preference via feature detection Customizable engine preference order Layout participation
  7. DrawComponent Sample
  8. Draw Component Sample
  9. HTML5 Standards Based Resolution Independence
  10. Ext Charts
  11. Working with Charts DrawComponent Chart Store Axis Series Legend Callout Pie Bar/Column Line/Area Scatter
  12. Simple Pie Chart
  13. Simple Pie Chart
  14. Series Properties Label configuration Animation e ects Shadow e ects Highlighting e ects Gradients Legends Callouts Renderers
  15. Label Options Full Font styling Orientation Rotation Positioning Renderers
  16. Legends Positioning: top, bottom, left, right, floating Vertical/Horizontal stacking Styling using same Label API
  17. Callouts Tooltips on steroids Series/Chart highlighting Axis selection - pan/zoom
  18. Gradients Shared across all series Accessed by reference id Multiple color support Linear gradients Multiple opacity stop support Radial gradients
  19. Linear Gradient Sample
  20. Pie Properties angleField lengthField Stacking Pie or Donuts?
  21. Styled Pie Chart
  22. Series Renderers Similar concept to Grid Renderers Customize any property Return new set of properties Available to all series
  23. Series Renderers
  24. Styled Pie Chart
  25. Cartesian Charts Axis support Bar/Column, Line/Area, Scatter Point Mix and Match
  26. 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
  27. Axis Sample
  28. Column Sample
  29. Column Charts
  30. Column/Bar Properties Assign an array of fields to add grouping Stack flag to change to stacking
  31. Column/Bar Sample
  32. Grouped/Stacked Bar/Column
  33. Line Charts Markers Smoothing Fills Stacking for area charts
  34. Line Charts
  35. Stocks Sample
  36. Scatter Charts
  37. Mixed Series
  38. Beyond Charting Full Graphical Dashboards Graphic Display Gauges Heatmaps Organizational Charts Network Diagrams Interactive Maps and Location Components Venn Diagrams
  39. Thank You! @jamieavins