GWTGraphicsCharts

BarChart, PieChart and DonutChart components

View larger

Close

View larger

Close

View larger

Close

This add-on contains three chart components: BarChart, PieChart and DonutChart. These component implementations use GWT Graphics. In order to use these charts in your project you have to add GWT Graphics to the class path of your project.

Sample code

BarChart barChart = new BarChart();
barChart.setColors(new String[] { "#ee7c08", "#00b4f0", "#000000",
		"#40B527", "#ffffff", "#d8d2c6" });
barChart.setWidth("300px");
barChart.setHeight("300px");

IndexedContainer cont = new IndexedContainer();
cont.addContainerProperty("value", Double.class, null);
cont.addContainerProperty("caption", String.class, null);
Object itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(2.0);
cont.getContainerProperty(itemId, "caption").setValue("A");
itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(3.0);
cont.getContainerProperty(itemId, "caption").setValue("B");
itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(1.5);
cont.getContainerProperty(itemId, "caption").setValue("C");

barChart.setContainerDataSource(cont);
barChart.setItemValuePropertyId("value");
barChart.setItemCaptionPropertyId("caption");
barChart.setGridMaxValue(4);
barChart.setGridMarkLineCount(3);

mainWindow.getContent().addComponent(barChart);

DonutChart donutChart = new DonutChart();
donutChart.setColors(new String[] { "red", "green", "black", "blue",
"yellow" });
donutChart.setWidth("300px");
donutChart.setHeight("300px");

IndexedContainer cont = new IndexedContainer();
cont.addContainerProperty("value", Double.class, null);
Object itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(2.0);
itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(3.0);
itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(1.5);
itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(4);
itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(0.3);

donutChart.setContainerDataSource(cont);
donutChart.setItemValuePropertyId("value");

PieChart pieChart = new PieChart();
pieChart.setColors(new String[] { "#ee7c08", "#00b4f0" });
pieChart.setBorderColor("black");
pieChart.setWidth("300px");
pieChart.setHeight("300px");

IndexedContainer cont = new IndexedContainer();
cont.addContainerProperty("value", Double.class, null);
Object itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(1.0);
itemId = cont.addItem();
cont.getContainerProperty(itemId, "value").setValue(3.0);

pieChart.setContainerDataSource(cont);
pieChart.setItemValuePropertyId("value");

Links

• Demo
• GWT Graphics
• Source codes

Compatibility