Charting & Data Visualization in Ext JS 4

12,969 views
12,673 views

Published on

The exciting future of full JavaScript-powered charts and data visualizations coming in Ext JS 4.0! No Flash required!

Published in: Technology, Business
2 Comments
3 Likes
Statistics
Notes
No Downloads
Views
Total views
12,969
On SlideShare
0
From Embeds
0
Number of Embeds
601
Actions
Shares
0
Downloads
307
Comments
2
Likes
3
Embeds 0
No embeds

No notes for slide

Charting & Data Visualization in Ext JS 4

  1. 1. Ext 4 Charting and Visualization
  2. 2. DmitryBaranovskiy- Raphaël - Jason Johnston - CSS3 Pie - Nicolas Belmonte - InfoVis -
  3. 3. Ext Draw Working with Vector Graphics SurfaceSVG Engine VML Engine Canvas Engine Sprite
  4. 4. Ext.draw.SurfaceRendering of primitives: Ellipses, Rectangles, Complex PathsTextImagesGradients
  5. 5. Ext.draw.SpriteAbstracted drawing elementsNormalizes di erences between engine API syntaxAttributesEvent support (extends Observable)Transforms (Rotate, Translate, Scale)Animation supported through Ext.fxSpriteComposites
  6. 6. Ext.draw.DrawComponentExtends Ext.ComponentEngine preference via feature detectionCustomizable engine preference orderLayout participation
  7. 7. DrawComponent Sample
  8. 8. Draw Component Sample
  9. 9. HTML5 Standards BasedResolution Independence
  10. 10. Ext Charts
  11. 11. Working with Charts DrawComponent ChartStore Axis Series Legend Callout Pie Bar/Column Line/Area Scatter
  12. 12. Simple Pie Chart
  13. 13. Simple Pie Chart
  14. 14. Series PropertiesLabel configurationAnimation e ectsShadow e ectsHighlighting e ectsGradientsLegendsCalloutsRenderers
  15. 15. Label OptionsFull Font stylingOrientationRotationPositioningRenderers
  16. 16. LegendsPositioning: top, bottom, left, right, floatingVertical/Horizontal stackingStyling using same Label API
  17. 17. CalloutsTooltips on steroidsSeries/Chart highlightingAxis selection - pan/zoom
  18. 18. GradientsShared across all seriesAccessed by reference idMultiple color supportLinear gradientsMultiple opacity stop supportRadial gradients
  19. 19. Linear Gradient Sample
  20. 20. Pie PropertiesangleFieldlengthFieldStackingPie or Donuts?
  21. 21. Styled Pie Chart
  22. 22. Series RenderersSimilar concept to Grid RenderersCustomize any propertyReturn new set of propertiesAvailable to all series
  23. 23. Series Renderers
  24. 24. Styled Pie Chart
  25. 25. Cartesian ChartsAxis supportBar/Column, Line/Area, Scatter PointMix and Match
  26. 26. AxesNumeric, Category and TimeAlign to top, bottom, left, rightBind each axis to di erent data setsEllipsis supportGridline supportFull label configuration support
  27. 27. Axis Sample
  28. 28. Column Sample
  29. 29. Column Charts
  30. 30. Column/Bar PropertiesAssign an array of fields to add groupingStack flag to change to stacking
  31. 31. Column/Bar Sample
  32. 32. Grouped/Stacked Bar/Column
  33. 33. Line ChartsMarkersSmoothingFillsStacking for area charts
  34. 34. Line Charts
  35. 35. Stocks Sample
  36. 36. Scatter Charts
  37. 37. Mixed Series
  38. 38. Beyond ChartingFull Graphical DashboardsGraphic Display GaugesHeatmapsOrganizational ChartsNetwork DiagramsInteractive Maps and Location ComponentsVenn Diagrams
  39. 39. Thank You! @jamieavins

×