charting & data visualization in ext gwt 3.0

Wednesday, November 2, 2011

Brendan Coughran, Sencha

DRAWING AND CHARTING

@whereisthysting

Sprite

Canvas EngineVML EngineSVG Engine

Surface

Sprite

Canvas EngineVML EngineSVG Engine

Surface

SurfaceVector Primitives

TextImages

Gradients

Sprite

SpriteAbstracted drawing elements

Normalizes differences between engine API syntaxAttributes

EventsTransformsAnimations

DrawComponentExtends ComponentContains surfaceLayout 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>

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();

Charts

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);

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);

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);

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);

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);

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);

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);

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);

Customizationand

Interactivity

Events series.addSeriesSelectionHandler(new SeriesSelectionHandler() {

@Override public void onSeriesClick(SeriesSelectionEvent event) { Info.display("Click", NumberFormat.getFormat("0").format(event.getValue())); } });

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);

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); } });

Tooltip Exampleprivate 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);

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);

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);

Animation Exampleprivate 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(); } }; }

Questions?

charting & data visualization in ext gwt 3.0

sprite sprite

barseries

pieseries

component

drawcomponent

sprite

sprite

scatterseries

Technology

ext js versus gwt alex chapman and michelleta razon

best practices in ext gwt

gwt panels

gwt indepth

architecting your gwt applications with gwt-platform -...

gwt: why gwt, gquery, and requestfactory

ext gwt 3.0 layouts

seminar : rich java client with gwt, ext js and gxt...

formation gwt · 2013-03-09 · • gwt et les appels...

gwt-ext 로 web application 개발하기

an introduction to gwt and ext gwt

gwt programming cookbook · gwt programming cookbook ii...

gwt ii - trabajando con gwt

gwt-ext 로 web application 개발하기 idstrust ecm...

gwt presentation

advanced performance tuning in ext gwt

ext gwt 3.0 theming and appearances

creating ext gwt extensions and components

performance optimization for ext gwt 3.0

introducing ext gwt 3