Charting & Data Visualization in Ext GWT 3.0

Wednesday, November 2, 2011

DRAWING AND CHARTING Brendan Coughran, Sencha @whereisthystingWednesday, November 2, 2011

DrawWednesday, November 2, 2011

Surface SVG Engine VML Engine Canvas Engine SpriteWednesday, November 2, 2011

SurfaceWednesday, November 2, 2011

Surface Vector Primitives Text Images GradientsWednesday, November 2, 2011

SpriteWednesday, November 2, 2011

Sprite Abstracted drawing elements Normalizes differences between engine API syntax Attributes Events Transforms AnimationsWednesday, November 2, 2011

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

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

ChartsWednesday, November 2, 2011

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

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

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

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

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

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

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

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

Customization and InteractivityWednesday, November 2, 2011

Events series.addSeriesSelectionHandler(new SeriesSelectionHandler() { @Override public void onSeriesClick(SeriesSelectionEvent event) { Info.display("Click", NumberFormat.getFormat("0").format (event.getValue())); } });Wednesday, November 2, 2011

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

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

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

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

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

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

Questions?Wednesday, November 2, 2011

Charting & Data Visualization in Ext GWT 3.0

by Sencha

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 181

Statistics

Charting & Data Visualization in Ext GWT 3.0 Presentation Transcript

http://www.sencha.com	180
http://sencha.site	1