Charting & Data Visualization in Ext GWT 3.0

DRAWING AND CHARTING
Brendan Coughran, Sencha

@whereisthysting

Wednesday, November 2, 2011

Draw


Surface

SVG Engine VML Engine Canvas Engine

Sprite


Surface

SVG Engine
VML Engine
Canvas Engine

Sprite


Surface


Surface
Vector Primitives
Text
Images
Gradients


Sprite


Sprite
Abstracted drawing elements
Normalizes differences between engine API syntax
Attributes
Events
Transforms
Animations


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>


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());
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.setYField(dataAccess.data1());
series.setStroke(RGB.RED);
series.setShowMarkers(true);
series.setMarkerType(Shape.CROSS);
series.setMarkerSize(6);
series.setMarkerColor(RGB.RED);


Area Example
AreaSeries<Data> series = new AreaSeries<Data>();
series.setOpacity(0.93);
series.addYField(dataAccess.data1());
series.addColor(new RGB(148, 174, 10));


Gauge Example
GaugeAxis<Data> axis = new GaugeAxis<Data>();
axis.setMargin(10);
axis.setMinimum(0);
axis.setMaximum(100);

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

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

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


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


Label Example
PieSeries<Data> series = new PieSeries<Data>();
series.setAngleField(dataAccess.data1());
series.addLengthField(dataAccess.data2());
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);


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


Questions?


Charting & Data Visualization in Ext GWT 3.0

More Related Content

Similar to Charting & Data Visualization in Ext GWT 3.0

More from Sencha

Recently uploaded

Charting & Data Visualization in Ext GWT 3.0