Charting & Data Visualization in Ext GWT 3.0

Wednesday, November 2, 2011

Brendan Coughran, Sencha

DRAWING AND CHARTING

@whereisthysting


Draw


Sprite

Canvas EngineVML EngineSVG Engine

Surface


Sprite

Canvas EngineVML EngineSVG Engine

Surface


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?


Technology

Charting & Data Visualization in Ext GWT 3.0