Your SlideShare is downloading. ×
0
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Charting & Data Visualization in Ext JS 4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Charting & Data Visualization in Ext JS 4

12,266

Published on

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

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,266
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
306
Comments
2
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×