Wednesday, November 2, 2011
DRAWING AND CHARTING                              Brendan Coughran, Sencha                                      @whereisth...
DrawWednesday, November 2, 2011
Surface                         SVG Engine   VML Engine   Canvas Engine                                        SpriteWedne...
Surface                              SVG Engine                               VML Engine                              Canv...
SurfaceWednesday, November 2, 2011
Surface                              Vector Primitives                                    Text                            ...
SpriteWednesday, November 2, 2011
Sprite                       Abstracted drawing elements             Normalizes differences between engine API syntax     ...
DrawComponent       Extends Component       Contains surface       Layout participation       <replace-with class=com.senc...
DrawComponent Example              DrawComponent component = new DrawComponent();              PathSprite path = new PathS...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Wednesday, November 2, 2011
ChartsWednesday, November 2, 2011
Chart Example              ListStore<Data> store = new ListStore<Data>(dataAccess.nameKey());              store.addAll(Te...
Scatter Example              NumericAxis<Data> axis = new NumericAxis<Data>();              axis.setPosition(Position.LEFT...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Bar Example              CategoryAxis<Data, String> catAxis = new CategoryAxis<Data, String>();              catAxis.setPo...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Line Example              Legend<Data> legend = new Legend<Data>();              legend.setPosition(Position.RIGHT);      ...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Area Example              AreaSeries<Data> series = new AreaSeries<Data>();              series.setYAxisPosition(Position....
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Gauge Example              GaugeAxis<Data> axis = new GaugeAxis<Data>();              axis.setMargin(10);              axi...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Radar Example              RadialAxis<Data, String> axis = new RadialAxis<Data, String>();              axis.setCategoryFi...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Pie Example           PieSeries<Data> series = new PieSeries<Data>();           series.setAngleField(dataAccess.data1()); ...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Customization                                   and                               InteractivityWednesday, November 2, 2011
Events           series.addSeriesSelectionHandler(new SeriesSelectionHandler() {             @Override             public ...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Mixed Example             BarSeries<Data> bar = new BarSeries<Data>();             bar.setYAxisPosition(Position.LEFT);   ...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Renderer Example           column.setRenderer(new SeriesRenderer<Data>() {             @Override             public Sprite...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Tooltip Example           private LabelProvider<Number> million = new LabelProvider<Number>() {             @Override     ...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Label Example             PieSeries<Data> series = new PieSeries<Data>();             series.setAngleField(dataAccess.data...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Live Example              line.setMarkerIndex(1);              TimeAxis<Site> time = new TimeAxis<Site>();              ti...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Animation Example           private Animator createRadiusAnimator(final CircleSprite sprite, double           radius) {   ...
Wednesday, November 2, 2011
Wednesday, November 2, 2011
Questions?Wednesday, November 2, 2011
Upcoming SlideShare
Loading in …5
×

Charting & Data Visualization in Ext GWT 3.0

4,110 views

Published on

It has always been a challenge to draw objects in GWT because SVG and VML are not supported out of the box. In Ext GWT 3.0, we solve this problem by providing a draw framework that runs everywhere, from IE6 to the latest Chrome that is developed as a pure GWT library. Learn about the new API’s and features including examples.

Published in: Technology, Art & Photos
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,110
On SlideShare
0
From Embeds
0
Number of Embeds
193
Actions
Shares
0
Downloads
87
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Charting & Data Visualization in Ext GWT 3.0

  1. 1. Wednesday, November 2, 2011
  2. 2. DRAWING AND CHARTING Brendan Coughran, Sencha @whereisthystingWednesday, November 2, 2011
  3. 3. DrawWednesday, November 2, 2011
  4. 4. Surface SVG Engine VML Engine Canvas Engine SpriteWednesday, November 2, 2011
  5. 5. Surface SVG Engine VML Engine Canvas Engine SpriteWednesday, November 2, 2011
  6. 6. SurfaceWednesday, November 2, 2011
  7. 7. Surface Vector Primitives Text Images GradientsWednesday, November 2, 2011
  8. 8. SpriteWednesday, November 2, 2011
  9. 9. Sprite Abstracted drawing elements Normalizes differences between engine API syntax Attributes Events Transforms AnimationsWednesday, November 2, 2011
  10. 10. DrawComponent Extends Component Contains surface Layout participation <replace-with class=com.sencha.gxt.chart.client.draw.engine.SVG> <when-type-is class=com.sencha.gxt.chart.client.draw.Surface /> </replace-with> <replace-with class=com.sencha.gxt.chart.client.draw.engine.VML> <when-type-is class=com.sencha.gxt.chart.client.draw.Surface /> <any> <when-property-is name=user.agent value=ie6 /> <when-property-is name=user.agent value=ie8 /> </any> </replace-with>Wednesday, November 2, 2011
  11. 11. DrawComponent Example DrawComponent component = new DrawComponent(); PathSprite path = new PathSprite(); path.addCommand(new MoveTo(75, 75)); path.addCommand(new CurveTo(0, -25, 50, 25, 50, 0, true)); path.addCommand(new CurveTo(0, -25, -50, 25, -50, 0, true)); path.setStroke(new RGB("#000")); path.setStrokeWidth(2); path.setFill(new RGB("#fc0")); path.setFillOpacity(0.25); component.addSprite(path); component.redraw();Wednesday, November 2, 2011
  12. 12. Wednesday, November 2, 2011
  13. 13. Wednesday, November 2, 2011
  14. 14. Wednesday, November 2, 2011
  15. 15. Wednesday, November 2, 2011
  16. 16. ChartsWednesday, November 2, 2011
  17. 17. Chart Example ListStore<Data> store = new ListStore<Data>(dataAccess.nameKey()); store.addAll(TestData.getData(12, 0, 100)); Chart<Data> chart = new Chart<Data>(); chart.setStore(store); chart.setChartShadow(true);Wednesday, November 2, 2011
  18. 18. Scatter Example NumericAxis<Data> axis = new NumericAxis<Data>(); axis.setPosition(Position.LEFT); axis.addField(dataAccess.data1()); axis.addField(dataAccess.data2()); axis.addField(dataAccess.data3()); TextSprite title = new TextSprite("Number of Hits"); title.setFontSize(18); axis.setTitleConfig(title); chart.addAxis(axis); ScatterSeries<Data> series = new ScatterSeries<Data>(); series.setYAxisPosition(Position.LEFT); series.setYField(dataAccess.data1()); series.setMarkerColor(RGB.GREEN); series.setMarkerType(Shape.CROSS); series.setMarkerSize(8); series.setHighlighting(true); chart.addSeries(series);Wednesday, November 2, 2011
  19. 19. Wednesday, November 2, 2011
  20. 20. Wednesday, November 2, 2011
  21. 21. Bar Example CategoryAxis<Data, String> catAxis = new CategoryAxis<Data, String>(); catAxis.setPosition(Position.LEFT); catAxis.setField(dataAccess.name()); title = new TextSprite("Month of the Year"); title.setFontSize(18); catAxis.setTitleConfig(title); chart.addAxis(catAxis); BarSeries<Data> bar = new BarSeries<Data>(); bar.setYAxisPosition(Position.BOTTOM); bar.addYField(dataAccess.data1()); bar.addColor(RGB.GREEN); bar.setHighlighting(true); chart.addSeries(bar);Wednesday, November 2, 2011
  22. 22. Wednesday, November 2, 2011
  23. 23. Wednesday, November 2, 2011
  24. 24. Line Example Legend<Data> legend = new Legend<Data>(); legend.setPosition(Position.RIGHT); legend.setItemHighlighting(false); legend.setItemHiding(true); chart.setLegend(legend); LineSeries<Data> series = new LineSeries<Data>(); series.setYAxisPosition(Position.LEFT); series.setYField(dataAccess.data1()); series.setStroke(RGB.RED); series.setShowMarkers(true); series.setMarkerType(Shape.CROSS); series.setMarkerSize(6); series.setMarkerColor(RGB.RED); series.setHighlighting(true); chart.addSeries(series);Wednesday, November 2, 2011
  25. 25. Wednesday, November 2, 2011
  26. 26. Wednesday, November 2, 2011
  27. 27. Area Example AreaSeries<Data> series = new AreaSeries<Data>(); series.setYAxisPosition(Position.LEFT); series.setOpacity(0.93); series.addYField(dataAccess.data1()); series.addYField(dataAccess.data2()); series.addYField(dataAccess.data3()); series.addYField(dataAccess.data4()); series.addYField(dataAccess.data5()); series.addYField(dataAccess.data6()); series.addYField(dataAccess.data7()); series.addColor(new RGB(148, 174, 10)); series.addColor(new RGB(17, 95, 166)); series.addColor(new RGB(166, 17, 32)); series.addColor(new RGB(255, 136, 9)); series.addColor(new RGB(255, 209, 62)); series.addColor(new RGB(166, 17, 135)); series.addColor(new RGB(36, 173, 154)); chart.addSeries(series);Wednesday, November 2, 2011
  28. 28. Wednesday, November 2, 2011
  29. 29. Wednesday, November 2, 2011
  30. 30. Gauge Example GaugeAxis<Data> axis = new GaugeAxis<Data>(); axis.setMargin(10); axis.setMinimum(0); axis.setMaximum(100); chart.addAxis(axis); GaugeSeries<Data> gauge = new GaugeSeries<Data>(); gauge.addColor(color); gauge.addColor(new RGB("#ddd")); gauge.setAngleField(provider); gauge.setNeedle(needle); gauge.setDonut(donut); chart.addSeries(gauge);Wednesday, November 2, 2011
  31. 31. Wednesday, November 2, 2011
  32. 32. Wednesday, November 2, 2011
  33. 33. Radar Example RadialAxis<Data, String> axis = new RadialAxis<Data, String>(); axis.setCategoryField(dataAccess.name()); chart.addAxis(axis); RadarSeries<Data> radar = new RadarSeries<Data>(); radar.setYField(dataAccess.data1()); radar.setStroke(RGB.RED); radar.setShowMarkers(true); radar.setMarkerType(Shape.CIRCLE); radar.setMarkerColor(RGB.RED); chart.addSeries(radar);Wednesday, November 2, 2011
  34. 34. Wednesday, November 2, 2011
  35. 35. Wednesday, November 2, 2011
  36. 36. Pie Example PieSeries<Data> series = new PieSeries<Data>(); series.setAngleField(dataAccess.data1()); chart.addSeries(series); Gradient slice1 = new Gradient("slice1", 45); slice1.addStop(new Stop(0, new RGB(148, 174, 10))); slice1.addStop(new Stop(100, new RGB(107, 126, 7))); chart.addGradient(slice1); series.addColor(slice1);Wednesday, November 2, 2011
  37. 37. Wednesday, November 2, 2011
  38. 38. Wednesday, November 2, 2011
  39. 39. Customization and InteractivityWednesday, November 2, 2011
  40. 40. Events series.addSeriesSelectionHandler(new SeriesSelectionHandler() { @Override public void onSeriesClick(SeriesSelectionEvent event) { Info.display("Click", NumberFormat.getFormat("0").format (event.getValue())); } });Wednesday, November 2, 2011
  41. 41. Wednesday, November 2, 2011
  42. 42. Wednesday, November 2, 2011
  43. 43. Mixed Example BarSeries<Data> bar = new BarSeries<Data>(); bar.setYAxisPosition(Position.LEFT); bar.addYField(dataAccess.data1()); bar.setColumn(true); bar.addColor(new RGB(240, 165, 10)); bar.setShownInLegend(false); chart.addSeries(bar); ScatterSeries<Data> scatter = new ScatterSeries<Data>(); scatter.setYAxisPosition(Position.LEFT); scatter.setYField(dataAccess.data2()); scatter.setMarkerType(Shape.CIRCLE); scatter.setMarkerSize(6); scatter.setMarkerColor(RGB.RED); scatter.setLegendTitle("Scatter"); chart.addSeries(scatter); LineSeries<Data> line = new LineSeries<Data>(); line.setYAxisPosition(Position.LEFT); line.setYField(dataAccess.data3()); line.setStroke(RGB.BLUE); line.setSmooth(true); line.setFill(new RGB(32, 68, 186)); line.setLegendTitle("Line"); chart.addSeries(line);Wednesday, November 2, 2011
  44. 44. Wednesday, November 2, 2011
  45. 45. Wednesday, November 2, 2011
  46. 46. Renderer Example column.setRenderer(new SeriesRenderer<Data>() { @Override public Sprite spriteRenderer(Sprite sprite, int index, ListStore<Data> store) { sprite.setFill(colors[index % colors.length]); return sprite; } }); column.setHighlighter(new SeriesHighlighter() { @Override public void hightlight(Sprite sprite) { sprite.setStroke(new RGB(85, 85, 204)); DrawFx.createStrokeWidthAnimator(sprite, 3).run(250); } @Override public void unhightlight(Sprite sprite) { sprite.setStroke(Color.NONE); DrawFx.createStrokeWidthAnimator(sprite, 0).run(250); } });Wednesday, November 2, 2011
  47. 47. Wednesday, November 2, 2011
  48. 48. Wednesday, November 2, 2011
  49. 49. Tooltip Example private LabelProvider<Number> million = new LabelProvider<Number>() { @Override public String getLabel(Number item) { int value = item.intValue() / 1000000; return value + "M"; } }; SeriesToolTipConfig<Movies> config = new SeriesToolTipConfig<Movies>(); config.setNumericLabelProvider(million); bar.setToolTipConfig(config);Wednesday, November 2, 2011
  50. 50. Wednesday, November 2, 2011
  51. 51. Wednesday, November 2, 2011
  52. 52. Label Example PieSeries<Data> series = new PieSeries<Data>(); series.setAngleField(dataAccess.data1()); series.addLengthField(dataAccess.data2()); series.setHighlighting(true); TextSprite textConfig = new TextSprite(); textConfig.setFont("Arial"); textConfig.setFontSize(14); textConfig.setTextAnchor(TextAnchor.MIDDLE); textConfig.setFill(RGB.WHITE); SeriesLabelConfig<Data> labelConfig = new SeriesLabelConfig<Data>(); labelConfig.setNumericLabelProvider(null); labelConfig.setValueProvider(dataAccess.name(), new LabelProvider<String>() { @Override public String getLabel(String item) { return item.substring(0, 3); } }); labelConfig.setSpriteConfig(textConfig); series.setLabelConfig(labelConfig); chart.addSeries(series);Wednesday, November 2, 2011
  53. 53. Wednesday, November 2, 2011
  54. 54. Wednesday, November 2, 2011
  55. 55. Live Example line.setMarkerIndex(1); TimeAxis<Site> time = new TimeAxis<Site>(); time.setField(siteAccess.date()); time.setStartDate(f.parse("Feb 1")); time.setEndDate(f.parse("Feb 7")); time.setLabelProvider(new LabelProvider<Date>() { @Override public String getLabel(Date item) { return f.format(item); } }); chart.addAxis(time);Wednesday, November 2, 2011
  56. 56. Wednesday, November 2, 2011
  57. 57. Wednesday, November 2, 2011
  58. 58. Animation Example private Animator createRadiusAnimator(final CircleSprite sprite, double radius) { final double origin = sprite.getRadius(); final double delta = radius - origin; return new Animator() { @Override protected void onUpdate(double progress) { sprite.setRadius(origin + (delta * progress)); sprite.redraw(); } }; }Wednesday, November 2, 2011
  59. 59. Wednesday, November 2, 2011
  60. 60. Wednesday, November 2, 2011
  61. 61. Questions?Wednesday, November 2, 2011

×