Solution for GWT and FusionCharts

[jdawg3k]

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)

[Ravi M]

Have you actually got the above to work correctly? We are trying to use FusionCharts in a GWT application, and tried to write a small "sandbox" application along the lines that you've described above. In hosted mode (GWT 1.4.60), we get the following error:

 

 

 

[WARN] Malformed JSNI reference 'setDataURL'; expect subsequent failures

 

java.lang.NoSuchFieldError: setDataURL

 

at com.google.gwt.dev.shell.CompilingClassLoader$DispatchClassInfoOracle.getDispId(CompilingClassLoader.java:102)

 

at com.google.gwt.dev.shell.CompilingClassLoader.getDispId(CompilingClassLoader.java:299)

 

at com.google.gwt.dev.shell.ie.IDispatchProxy.getIDsOfNames(IDispatchProxy.java:121)

 

at com.google.gwt.dev.shell.ie.IDispatchImpl.GetIDsOfNames(IDispatchImpl.java:273)

 

at com.google.gwt.dev.shell.ie.IDispatchImpl.method5(IDispatchImpl.java:192)

 

at org.eclipse.swt.internal.ole.win32.COMObject.callback5(COMObject.java:108)

 

at org.eclipse.swt.internal.ole.win32.IDispatch.Invoke(IDispatch.java:64)

 

at org.eclipse.swt.ole.win32.OleAutomation.invoke(OleAutomation.java:493)

 

at org.eclipse.swt.ole.win32.OleAutomation.invoke(OleAutomation.java:417)

 

at com.google.gwt.dev.shell.ie.ModuleSpaceIE6.doInvokeOnWindow(ModuleSpaceIE6.java:63)

 

 

 

Note that it doesn't appear this has anything to do with setDataURL method itself. If we comment out the "chart.setDataURL(dataUrl);" line in FusionChartWidget, it will fail with the same error, except for 'render'.

 

 

 

Any idea what might be up?

 

 

 

Thanks

 

Ravi

[jdawg3k]

I don't use the hosted browser - have you tried running it in a native browser?

[shawnjohnson159]

I was able to make this work, but I had to change it some to suite my needs. I wanted to control the DIV name where the chart was rendered as well as the name of the chart object itself - so I added arguments for those values. Also I was using the Pie3d and Grid, so I added those in too. I added FusionCharts.js as an included resource in my GWT module definition.

 

 

 

 

 

-------------------------------------------------------------------------------------------

 

Java Script Object (wrapper)

 

-------------------------------------------------------------------------------------------

 

import com.google.gwt.core.client.JavaScriptObject;



public final class FusionChartJS extends JavaScriptObject {







  protected FusionChartJS( ) {



  }





  public static native FusionChartJS getCylinderInstance( String div, String width, String height ) /*-{



    var chart = new $wnd.FusionCharts( "fusioncharts/Cylinder.swf", div, width, height, "0", "0" );



    return chart;



  }-*/;





  public static native FusionChartJS getPie3dInstance( String div, String width, String height ) /*-{



    var chart = new $wnd.FusionCharts( "fusioncharts/Pie3D.swf", div, width, height, "0", "0" );



    return chart;



  }-*/;





  public static native FusionChartJS getGridInstance( String div, String width, String height ) /*-{



    var chart = new $wnd.FusionCharts( "fusioncharts/SSGrid.swf", div, width, height, "0", "0" );



    return chart;



  }-*/;





  public static native FusionChartJS getInstance( String chartSwf, String div, String width, String height ) /*-{



    var chart = new $wnd.FusionCharts( chartSwf, div, width, height, "0", "0" );



    return chart;



  }-*/;







  public native void setDataUrl( String url ) /*-{



    this.setDataURL( url );       



  }-*/;





  public native void addParam( String name, String value ) /*-{



  	this.addParam( name, value );



   }-*/;



  public native void addVariable( String name, String value ) /*-{



  	this.addVariable( name, value );



   }-*/;





  public native void setTransparent( boolean b ) /*-{



  	this.setTransparent( b );



   }-*/;







  public native void render( String divId ) /*-{



    this.render( divId );       



  }-*/;







}

 

-------------------------------------------------------------------------------------------

 

Widget

 

-------------------------------------------------------------------------------------------

 

import java.util.ArrayList;



import com.google.gwt.user.client.ui.Composite;

import com.google.gwt.user.client.ui.SimplePanel;

import com.google.gwt.user.client.ui.Widget;



public class FusionChartWidget extends Composite {







  public final static int TYPE_CYLINDER = 1;

  public final static int TYPE_PIE3D = 2;

  public final static int TYPE_GRID = 3;



  // default chart type

  private int chartType = TYPE_PIE3D;



  // simple panel to hold the chart

  private SimplePanel panel = null;



  private int width = 0;



  private int height = 0;



  private String dataUrl = null;



  private String containerDivId  ;



  private String chartDivId;



  private ArrayList chartVariables = null;





  private boolean isTransparent;



  private class LabelValue {

	  String label = null;

	  String value = null;

	  /*

	   * @param label

	   * @param value

	   */

	  LabelValue(String l, String v) {

		  label = l;

		  value = v;

	  }

	public String getLabel() {

		return label;

	}

	public String getValue() {

		return value;

	}





  }





  /*

   * @param chartType - Type of fusionchart to create

   * @param containerDivId - ID of the DIV that contains the chart

   * @param chartDivId - ID of the OBJECT or EMBED object to render the Flash chart

   * @param width width of object in pixels

   * @param height height of object in pixels 

   */

  public FusionChartWidget( int chartType, String containerDivId, String chartDivId, int width, int height ) {



    this.chartType = chartType;



    this.width = width;



    this.height = height;



    this.containerDivId = containerDivId;



    this.chartDivId = chartDivId;



    // initialize array

    this.chartVariables = new ArrayList();





    // this simple panel holds the Flash OBJECT/EMBED object

    panel = new SimplePanel();



    panel.getElement().setId(containerDivId);



    initWidget( panel );







  }







  public void setDataUrl( String dataUrl ) {



    this.dataUrl = dataUrl;



  }



  public void addVariable( String label, String value ) {

	  this.chartVariables.add( ( new LabelValue( label, value) ) );

   }



  public void setTransparent( boolean b ) {



	    this.isTransparent = b;



  }



  protected void initWidget( Widget widget ) {



    super.initWidget( widget );



  }







  protected void onAttach( ) {

	super.onAttach();



    FusionChartJS chart = null;



    switch ( chartType ) {







      case TYPE_CYLINDER:



        chart = FusionChartJS.getCylinderInstance( this.chartDivId, Integer.toString( width ), Integer.toString( height ) );



        break;





      case TYPE_PIE3D:



	        chart = FusionChartJS.getPie3dInstance( this.chartDivId, Integer.toString( width ), Integer.toString( height ) );



	        break;





      case TYPE_GRID:



	        chart = FusionChartJS.getGridInstance( this.chartDivId, Integer.toString( width ), Integer.toString( height ) );



	        break;



    }







    chart.setDataUrl( dataUrl );



    chart.setTransparent( isTransparent );



    // pass all variables

    for(int i=0; i
    	chart.addVariable(chartVariables.get(i).label, chartVariables.get(i).value);

    }







    chart.render( this.containerDivId );



  }







}

 

 

 

-------------------------------------------------------------------------------------------

 

Sample Call

 

-------------------------------------------------------------------------------------------

 

FusionChartWidget myGrid = new FusionChartWidget( FusionChartWidget.TYPE_GRID, "gridHolder", "myGrid", 244, 105 );

myGrid.setDataUrl("chartdata/data.xml");

myGrid.setTransparent(true);

myGrid.addVariable("numberItemsPerPage", "10");

Edited January 11, 2010 by Guest

[Guest Madhumita]

Hello shawnjohnson159,

Welcome to FusionCharts Forum.

Thanks a lot for sharing your ideas.

This is what keeps FusionCharts going.

You ROCK!:hehe:

[dlai101]

Hi,

 

I've built an easy to use Java Wrapper where you can easily build your charts in an object oriented way.

 

 

 

Please visit my blog to download the package.

 

There is also an online guide that I have written as well.

 

 

 

http://davidlai101.com/blog/2010/02/02/fusion-charts-java-wrapper-updated/

 

 

 

Let me know how it goes

[Guest Madhumita]

Hey,

Thanks a lot for sharing your ideas with us.

We will analyse the codes and get back to you.

Edited February 5, 2010 by Guest

[AndrewNZ]

Hi,

 

The examples may work but I can't get them (the first two anyway) going based on the information/code provided. I admit I didn't attempt a run of the 3rd one (from David Lai) but as it seems to require a bunch of custom classes, it isn't really an option. For the first two, GWT spits a whole range of errors which could be for a whole range of reasons and debugging sample code is not an enjoyable task.

 

 

 

Does anyone know of a well documented GWT-Fusion Charts example where the demo (really) works? Fusion charts are much nicer than the Google Visualisation charts but the Google ones do work (pretty easily) with GWT. I'm keen to get the Fusion ones working as I've been a customer since 2006.

 

 

 

Thanks,

 

Andrew

[Guest Rajroop]

Hey Andrew,

 

 

 

Welcome to the FusionCharts Forum.

 

 

 

Could you please check the following post and see if it helps?

 

 

 

Ref.- http://www.fusioncharts.com/Showcase.asp#gwt

 

 

 

Looking forward to your valuable feedback on this.

[AndrewNZ]

Hi,

 

 

 

Thanks for your reply. I don't want to sound negative but:

 

- There is no documentation. None.

 

- It may be a brilliant api but where to even start?

 

- It doesn't seem to have anything to do with gwt other than having a gwt.xml file. No loadmodule, no RPC, etc, etc

 

- The code is 18 months old, does it still work with the latest GWT?

 

- The code doesn't seem to be supported any more

 

 

 

FusionCharts are a breeze to use in Microsoft-land and it is a real shame it is so difficult (impossible?) in GWT. That's where a few simple examples would have been great to at least get started. Without a working example it is just too hard.

 

 

 

But thanks for the suggestion.