This is a simple working interface between GWT and FusionCharts using DataUrl. I've implemented Cylinder but the rest follow the same pattern.
1. Copy FusionCharts.js to the 'public' directory.
2. Create a 'charts' directory under 'public' and copy in all the SWF files
3. Add the following line to your gwt.xml file:
If the above doesn't show up then it's: (open bracket)script src="FusionCharts.js"(close bracket)(open bracket)/script(close bracket)
4. Create FusionChartJS.java:
public final class FusionChartJS extends JavaScriptObject {
protected FusionChartJS( ) {
}
public static native FusionChartJS getCylinderInstance( String width, String height ) /*-{
var chart = new $wnd.FusionCharts( "charts/Cylinder.swf", "totalChart", width, height, "0", "0" );
return chart;
}-*/;
public native void setDataUrl( String url ) /*-{
this.setDataURL( url );
}-*/;
public native void render( String divId ) /*-{
this.render( divId );
}-*/;
}
5. Create FusionChartWidget.java:
public class FusionChartWidget extends Composite {
public final static int TYPE_CYLINDER = 1;
private static int seqId = 1;
private HTML holder = null;
private String divId = null;;
private int chartType = TYPE_CYLINDER;
private int width = 0;
private int height = 0;
private String dataUrl = null;
public FusionChartWidget( int chartType, int width, int height ) {
this.chartType = chartType;
this.width = width;
this.height = height;
divId = "chart" + (seqId++);
holder = new HTML("");
initWidget( holder );
}
public void setDataUrl( String dataUrl ) {
this.dataUrl = dataUrl;
}
protected void initWidget( Widget widget ) {
super.initWidget( widget );
}
protected void onAttach( ) {
FusionChartJS chart = null;
switch ( chartType ) {
case TYPE_CYLINDER:
chart = FusionChartJS.getCylinderInstance( Integer.toString( width ), Integer.toString( height ) );
break;
}
chart.setDataUrl( dataUrl );
chart.render( divId );
}
}
6. Finally, place the control on the the container:
FusionChartWidget chart = new FusionChartWidget( FusionChartWidget.TYPE_CYLINDER, 150, 250 );
chart.setDataUrl( "data/test-data.xml" );
add( chart );
FYI, for proof-of-concept you can place the test-data.xml file in a directory named 'data' in your 'public' directory. It looks like this:
86
If the above XML doesn't show up then it's:
(open bracket)chart upperLimit="100" lowerLimit="0" tickMarkGap="5" numberSuffix="%"(close bracket)
(open bracket)value(close bracket)86(open bracket)/value(close bracket)
(open bracket)/chart(close bracket)
