Charting & Data Visualization in Ext JS 4
Upcoming SlideShare
Loading in...5
×
 

Charting & Data Visualization in Ext JS 4

on

  • 13,337 views

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!

Statistics

Views

Total Views
13,337
Views on SlideShare
12,766
Embed Views
571

Actions

Likes
2
Downloads
297
Comments
2

6 Embeds 571

http://www.sencha.com 476
http://www.senchaworld.com 91
http://marketplace3.extjs.com 1
http://www.jobs.sencha.com 1
http://devs.sencha.com 1
url_unknown 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • Interesting charts apps
    Are you sure you want to
    Your message goes here
    Processing…
  • Will these charts be extendable? For example, could I add a 3rd y axis on line chart?
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Charting & Data Visualization in Ext JS 4 Charting & Data Visualization in Ext JS 4 Presentation Transcript

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