Integration with Fusion Charts

[clarke]

Greetings!

I am new to GWT and am considering using SmartGWT for all of our upcoming projects. I am testing the feasibility of using Fusion Charts inside of a SmartGWT panel. I have searched a lot and only found a very small thread on this forum even discussing this topic.

Can anyone give an outline of what needs to be done to get a "Hellow World Chart" showing?

Many Thanks!

[Isomorphic]

There's pre-built support for this in SmartClient, and you could sponsor the work to have it added to SmartGWT.

[clarke]

Thanks for the reply. I was hoping more for a SmartGWT binding (not SmartClient) or at least a very short sample that shows simple use of the two together.

[clarke]

(Being new to Javascript as well) looking at the Javascript, it doesn't look too difficult to map this to SmartGWT, so I'll give it a crack.

[clarke]

Here is where I am right now. It appears to be working. I'd like to split the javascript construction of the chart from the loading of the data.

Hopefully this helps someone.

package placement.client;

import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.HTMLFlow;

import placement.client.FCF_StackedColumn3D_Data.DataSet;

public class ChartPanel extends Canvas
{
	public static String CHARTPANEL = "Chart";
	
	public ChartPanel()
	{
		String chartParms = "\"../FusionCharts/FCF_StackedColumn3D.swf\", \"chart1Id\", \"800\", \"400\"";

		String chartXML = <xml creation code>;
		
		HTMLFlow contents = new HTMLFlow();
		contents.setContents("<div id='chartDiv' align='center'>"+
				"<script language=\"Javascript\" src=\"../FusionCharts/FusionCharts.js\"></script>" +
				"<script type='text/javascript' language='javascript'>" + 
				"var chart = new FusionCharts("+chartParms+");" +
				"chart.setDataXML(\""+chartXML+"\");" +
				"chart.render(\"chartDiv\");" +
				"</script>" +
				"</div>");
		contents.setWidth("100%");
		contents.setHeight("100%");
		addChild(contents);
	}
}

[clarke]

So using and HTMLFlow element to inject javascript seems a bit fragile. Is there a better way to integrate this? Something like derive from some javascript object and override methods?

Guidance would be greatly appreciated. I'm pretty inexperienced with both Javascript, HTML integration, and SmartGWT, but have lots of OO eperience with other languages.

[Isomorphic]

Look at the GWT docs on JSNI - there's a special syntax to run JavaScript almost like normal code, no need to "inject" it or anything like that.

[colinsulin]

I am dealing with this exact issue and I have been successful in getting a Fusion chart to show using a SmartGWT class that extends the Canvas class and overrides the getInnerHTML() method to produce code that creates the chart. This works fine in Firefox, but doesn't work in any other browser. I have tried IE8, Safari & Chrome.

I see from the link mentioned in this thread that Fusion charts will work in the other browsers.

Is using JSNI to invoke the Fusion charts APIs the _surefire_ way to render these charts? (I don't know JSNI that well, and I want to be sure that effort spent here will not be wasted)

Can you give me some pointers to any examples or documentation on how to get started with using the Fusion Charts support in SmartClient?

[Isomorphic]

This is no longer needed for SmartGWT. The latest builds have FusionChart support as well as FacetChart (better, is not Flash and works on mobile browsers).

[colinsulin]

Excellent - I have downloaded latest SmartGWT Pro build (12/07/10) I found the FacetChart class and the new constructors in the ListGrid class. Is there any more information on how to use FusionCharts instead of FacetCharts? (this is a business requirement) Can you provide a hint on where to find a demo or some code that uses Fusion charts - the current showcase doesn't appear to have anything that uses the new charting features.

[Isomorphic]

The charting classes require the Analytics module, so you should download the "Eval" build from smartclient.com/builds to play with it. The sample showing usage are being added to the Showcase right now, so we'd recommend waiting for the Dec 9 or Dec 10 build so you'll have code you can just copy and paste.

[vtran27]

I have downloaded the a nightly build of SmartGWTEE-2.5 as of 01/17/2011, could you please point me to the sample of FusionChart in the showcase ?

I've only been able to find examples of Cube and Advanced Cube which I don't need.

Am I on the right path with this code below ?

			ListGrid fusionChart = new ListGrid();
			fusionChart.setChartConstructor("FusionChart");
			fusionChart.setChartType(ChartType.BAR);
			fusionChart.setData(data);

[vtran27]

Figured it out. Hope this helps others...it was a painful research.

[CODE]
Flashlet fusionChart = new Flashlet();
fusionChart.setID("myChartId");
fusionChart.setWidth(800);
fusionChart.setHeight(400);
fusionChart.setSrc("FusionCharts/Column3D.swf");
fusionChart.setCodeBase("http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0");
fusionChart.setClassID("clsid:d27cdb6e-ae6d-11cf-96b8-444553540000");
fusionChart.setPluginsPage("http://www.macromedia.com/go/getflashplayer");

Map<String, String> params = new HashMap<String, String>();
params.put("movie", "FusionCharts/Column3D.swf");
params.put("flashvars", "&chartWidth=400&chartHeight=300&DOMId=myChartId&registerWithJS=1&debugMode=0&dataURL=FusionServlet");
params.put("quality", "high");

fusionChart.setParams(params);
this.addMember(fusionChart);
[/CODE>]

[curiousgally]

Can you detail it a bit.
I'm trying to generate a graph out of data in ListGrid.

Thanks in advance.

[bbruyn]

The charting classes require the Analytics module, so you should download the "Eval" build from smartclient.com/builds to play with it. The sample showing usage are being added to the Showcase right now, so we'd recommend waiting for the Dec 9 or Dec 10 build so you'll have code you can just copy and paste.

This would seem to indicate that there's an alternative to the Flashlet approach outlined by vtran27? I'm looking at the 4/11/2011 build and don't see the trick, if there is one.