Tuesday, February 2, 2010

GWT and Fusion Chart

In today's blog we are going to discuss about charts.
There are various libraries available for charting in GWT.
But the fusion chart is more interactive and with good UI.
I was asked to integrate Fusion chart with GWT. I searched for code witch will help me integrating fusion chart with GWT. On Fusion chart website I found http://code.google.com/p/gwt-fusionchart/ this link in which there are many classes using which you can integrate it with GWT. But if you want easy way to integrate it with GWT. Then you can use GWT2SWF library. You can get it from http://code.google.com/p/gwt2swf, its a very useful library.
Put the swf in your 'war' dir in application so it will get copied in parent folder when you are deploy you app on web server. You can put 'Data.xml' as data to swf file in same dir or you can pass it as a string from application. Now you can do it with couple of lines of code. The code is as follow:

SWFWidget piChart2D = new SWFWidget("Pie2D.swf", "600px", "600px");
Chart2D.addFlashVar("dataURL", "Data.xml");
panel.add(piChart2D);

Or

SWFWidget piChart3D = new SWFWidget("Pie3D.swf", "550px", "300px");
piChart3D.addFlashVar("dataXML", getXML());
piChart3D.addParam("dataXML", getXML());
panel.add(piChart3D);

In getXML() method you can create your own xml. here it is just a static file string as bellow:
private String getXML() {
return "<chart caption='Monthly Sales Summary' subcaption='For the year 2006' xAxisName='Month' yAxisName='Sales' numberPrefix='$'><set label='January' value='17400' /><set label='February' value='19800' /><set label='March' value='21800' /><set label='test Apr' value='23800' /> <set label='May' value='29600' /><set label='June' value='27600' /><set label='July' value='31800' /> <set label='August' value='39700' /><set label='September' value='37800' /> <set label='Zee11' value='21900' /><set label='November' value='32900' /> <set label='December' value='39800' /></chart>";
}

No comments:

Post a Comment