GFCharts is a simple way to integrate the widely popular Fusion Charts in Google Web Toolkit. A chart is simply a GWT Widget in which you can manipulate and use seamlessly...

 

Follow these steps to get started!

• To start you need to download the stable version of GFCharts!
• Extraxt The archive and put gfcharts.jar in your build path!
• Inhert gfcharts in your gwt.xml file:

<inherits name='net.dudesblog.gfcharts.GFCharts'/>

• In your war folder add the .swf files from fusioncharts pack along with the .js files in a folder called resources > chart > fusion. as the following image suggests:

• Include FusionCharts.js in your application .html file:

<script type="text/javascript" language="javascript"
    src="/website/resources/chart/fusion/FusionCharts.js">
</script>


• Use it in your client side!

// Create the Data Object
FusionChartExtendedData chartData = new FusionChartExtendedData();

// Add Chart Properties
chartData.addChartProperty("caption", "Population Chart");
chartData.addChartProperty("showValues", "0");
chartData.addChartProperty("sNumberSuffix", "%");
chartData.addChartProperty("decimals", "3");
chartData.addChartProperty("setAdaptiveYMin", "1");
chartData.addChartProperty("setAdaptiveSYMin", "1");
chartData.addChartProperty("lineThickness", "5");

// Add Chart Categories
chartData.addCategory("2000");
chartData.addCategory("2001");
chartData.addCategory("2002");
chartData.addCategory("2003");
chartData.addCategory("2004");
chartData.addCategory("2005");

// Create Data Set
FusionChartExtendedDataSet dataSet = new FusionChartExtendedDataSet();

// Add Data Set Properties
dataSet.addDataSetProperty("seriesname", "Population");

// Add Data Set Values
dataSet.addValue("275562673");
dataSet.addValue("278558081");
dataSet.addValue("280562489");
dataSet.addValue("290342551");
dataSet.addValue("290342551");
dataSet.addValue("293027112");

// Add Data Set To The Chart Data Object
chartData.addDataSet(dataSet);


// Create Data Set
dataSet = new FusionChartExtendedDataSet();

// Add Data Set Properties
dataSet.addDataSetProperty("parentYAxis", "S");
dataSet.addDataSetProperty("seriesname", "Birth Rate");

// Add Data Set Values
dataSet.addValue("1.42");
dataSet.addValue("1.42");
dataSet.addValue("1.41");
dataSet.addValue("1.414");
dataSet.addValue("1.413");
dataSet.addValue("1.414");

// Add Data Set To The Chart Data Object
chartData.addDataSet(dataSet);


// Create Data Set
dataSet = new FusionChartExtendedDataSet();

// Add Data Set Properties
dataSet.addDataSetProperty("parentYAxis", "S");
dataSet.addDataSetProperty("seriesname", "Death Rate");

// Add Data Set Values
dataSet.addValue("0.87");
dataSet.addValue("0.87");
dataSet.addValue("0.87");
dataSet.addValue("0.844");
dataSet.addValue("0.834");
dataSet.addValue("0.825");

// Add Data Set To The Chart Data Object
chartData.addDataSet(dataSet);


// Finally Create The Chart Itself
FusionChartWidget chart = new FusionChartWidget(FusionCharts.MSCombiDY2D, chartData);
chart.setTransparent(true);

// Now add it to a container
somePanel.add(chart);

 

• And the result would be

The online demo has sample source code for creating most types of charts.

The demo application source code is included in the package.