Using Fusion Charts with SmartGWT

[nagarajan_ka]

This is the HTML I used to create Fusion Chart

-------String : chartHtml -------

<div id='chartDiv' align='center'>
<script type='text/javascript' language='javascript'> 
var chart = new FusionCharts('<Fusion Chart Params>');
chart.setDataXML('<Fusion Chart XML>');
chart.render("chartDiv");
</script>
</div>

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

I place this HTML into HTMLFlow widget

final HTMLFlow contentHTML = new HTMLFlow();
contentHTML.setContents(chartHtml );

This approach works fine in Firefox. But it does not work in IE (testing in IE 7). The Javascript present in HTML does not run in IE.

I tried using HTMLFlow.setContentsType(ContentsType.PAGE). It doesnt work.

How do we fix this problem ? Is there a different/better approach to integrate Smart GWT with Fusion Charts ?

Thanks in Advance
Nagarajan

[Isomorphic]

Browsers do different things with inserted HTML with respect to script.

FusionCharts has the ability to replace a DIV with a chart (see their docs). Use an override of Canvas.getInnerHTML() to generate a DIV with a predictable ID and replace it with a FusionChart. Be sure to set redrawOnResize:false on the Canvas.

[dimitarn]

you can use
new HTML(<div id=divID></div>)

[sonnerdev]

Im having the same problem in IE.

Works beautiful in firefox but IE.

I did try with a pure new HTML(...), Canvas.setContents(), HTMLFlow, but no luck too.


I didnt get the trick with "getInnerHTML() and replace it with FusionChart" thing Isomporphic.

Im trying something close to this now:
mainPane.addMember(
new HTML(
"<div id=\"chartdiv\" align=\"center\">The chart will appear within this DIV. This text will be replaced by the chart.</div>" +
"<script type=\"text/javascript\">" +
"var myChart = new FusionCharts(\"fusion/charts/Pie3D.swf\", \"myChartId\", \"900\", \"300\", \"0\", \"0\");" +
"myChart.setDataURL(\"chart.xml\");" +
"myChart.render(\"chartdiv\");" +
"</script>")
);

Any help?

[sonnerdev]

man smartgwt hates IE 8.

[cutout33]

you can try this

http://aurorarnd.com/index.php?option=com_content&view=article&id=15:gwt-fusioncharts&catid=8&Itemid=29

[zdary]

Hi,

have you tried the aurorarnd.com?
They don't have a trial so I'd like to know whether it is worth it.

Isomorphic: Is this a best way how to integrate Fusion charts into smartGWT?

cheers,
Martin

[Isomorphic]

No, using SmartGWT's built-in support for FusionChart (in the analytics module) is the best approach. But a better approach is to use the new FacetChart, so you get mobile support and don't have to buy a separate license to FusionCharts.

[zdary]

thanks,

We already bought FusionCharts and our customers want that. At the moment FusionCharts have more features and are user friendly. For example they can zoom in and out without data being reloaded and so on.

I've seen a charting sections in the showcase 2.5 but all charts are based on FacetCharts.

Could you be more specific on the FusionChart support in analytics, please? Is there any example of how to use it? Or a class I should start from?

Cheers,
Zdary

[Isomorphic]

Actually, they are major feature advantages for FacetChart as well: on the fly chart type switching, facet swap, stacking, logarithmic scales on all chart types, standard Java events for interactivity, mobile support, etc. Zoom is a planned enhancement, and all features going forward will be added to FacetChart first and likely not at all to FusionChart.

If there are specific things you absolutely must have, consider Feature Sponsorship to get them added by a specific date.

That all set, when you have the Analytics module you can setChartConstructor() on a ListGrid or CubeGrid to "FusionChart" to have it generate a FusionChart rather than a FacetChart. Right now there is no direct API to create a FusionChart, only a FacetChart.

[zdary]

Hi,

I tried to modify your example /showcase/#gridCharting with smartGWT 2011-06-26 evaluation version to use FusionChart by adding an extra line

grid.setChartConstructor("FusionChart");

I end up with an exception

17:05:31.347:XRP6:WARN:ListGrid:isc_ReportTQIChartTab_1_0:Unable to create autoChild 'chart' of type 'FusionChart' - no such class in runtime.

com.smartgwt.client.core.JsObject$SGWT_WARN: 17:05:31.347:XRP6:WARN:ListGrid:isc_ReportTQIChartTab_1_0:Unable to create autoChild 'chart' of type 'FusionChart' - no such class in runtime.
    at sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)
    at sun.reflect.NativeConstructorAccessorImpl.newInstance(Unknown Source)
    at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(Unknown Source)
    at java.lang.reflect.Constructor.newInstance(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:105)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:326)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:207)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:129)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.smartgwt.client.widgets.grid.ListGrid.chartData(ListGrid.java)
    at cz.bcom.smartrise.client.tabs.ReportTQIChartTab.createPane(ReportTQIChartTab.java:92)
    at cz.bcom.smartrise.client.tabs.ReportTQIChartTab.<init>(ReportTQIChartTab.java:29)
    at cz.bcom.smartrise.client.HomeScreen.onModuleLoadTabTest(HomeScreen.java:99)
    at cz.bcom.smartrise.client.HomeScreen.getPane(HomeScreen.java:109)
    at cz.bcom.smartrise.client.utils.LoginHelper.setHomeScreen(LoginHelper.java:273)
    at cz.bcom.smartrise.client.utils.LoginHelper$3.execute(LoginHelper.java:108)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:326)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:207)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:129)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:269)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.gwt.core.client.impl.Impl.apply(Impl.java)
    at com.google.gwt.core.client.impl.Impl.entry0(Impl.java:214)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
    at java.lang.reflect.Method.invoke(Unknown Source)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:157)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:281)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:531)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:352)
    at java.lang.Thread.run(Unknown Source)

I copied all *.js and *.swf files from fusioncharts to WAR dir resources/chart/fusion
my *.html file has

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script>
      var isomorphicDir = "smartrise/sc/";
    </script>	

    <title>smartRISE</title>
    
    <script type="text/javascript" language="javascript" src="resources/chart/fusion/FusionCharts.js"></script>
    <script type="text/javascript" language="javascript" src="smartrise/smartrise.nocache.js"></script>
  </head>

*.gwt.xml

  <inherits name="com.smartgwtee.SmartGwtEE"/>
  <inherits name='com.google.gwt.user.User'/>
 
  <inherits name="com.smartgwt.Drawing"/>
  <inherits name="com.smartgwt.Analytics"/>
  
  <inherits name="com.smartgwtee.tools.Tools"/>
  <inherits name="com.smartgwt.SmartGwtPluginBridges"/>

and the full testcase

	List<ListGridField> fields = new ArrayList<ListGridField>();  
        fields.add(new ListGridField ("Jan", "January"));  
        fields.add(new ListGridField ("Feb", "February"));  
        fields.add(new ListGridField ("Mar", "March"));  
        fields.add(new ListGridField ("Apr", "April"));  
        fields.add(new ListGridField ("May", "May"));  
        fields.add(new ListGridField ("Jun", "June"));  
        fields.add(new ListGridField ("Jul", "July"));  
        fields.add(new ListGridField ("Aug", "August"));  
        fields.add(new ListGridField ("Sep", "September"));  
        fields.add(new ListGridField ("Oct", "October"));  
        fields.add(new ListGridField ("Nov", "November"));  
        fields.add(new ListGridField ("Dec", "December"));  

        // Creating product sales  
        char maxProduct = 'E';  
        List<ListGridRecord> salesData = new ArrayList<ListGridRecord>();  
        for (char prod = 'A'; prod <= maxProduct; prod++) {  
            ListGridRecord rec = new ListGridRecord();  
            rec.setAttribute("product", "Product " + prod); // Product name  
            long minSales = Math.round(Math.random() * 8000) + 2000; // 2k-10k  
            long maxVariance = minSales / 3; // up to 33% of min value for this product  
            for (ListGridField field : fields) {  
                rec.setAttribute(field.getName(), Math.round(Math.random() * maxVariance) + minSales);  
            }  
            salesData.add(rec);  
        }  

        // Creating product name field  
        ListGridField field = new ListGridField("product", "Products");  
        field.setCanEdit(Boolean.FALSE);  
        fields.add(0, field);  

        // Creating grid and overriding getCellStyle() to use custom styling for product field  
        // Use Dark  
        final ListGrid grid = new ListGrid() {  
            @Override  
            protected String getCellStyle (ListGridRecord record, int rowNum, int colNum) {  
                if ("product".equals(getFieldName(colNum))) {  
                    return super.getCellStyle(record, rowNum, colNum) + "Dark";  
                } else {  
                    return super.getCellStyle(record, rowNum, colNum);  
                }  
            }  
        };  
        grid.setChartConstructor("FusionChart");
        grid.setAlternateRecordStyles(Boolean.FALSE);  
        grid.setHeight(120);  
        grid.setCanEdit(Boolean.TRUE);  
        grid.setEditEvent(ListGridEditEvent.CLICK);  
        grid.setFields(fields.toArray(new ListGridField[0]));  
        grid.setData(salesData.toArray(new ListGridRecord[0]));  
        grid.setChartType(ChartType.AREA);  

        // Creating chart  
        final FacetChart chart = grid.chartData("product");  

        grid.addEditCompleteHandler(new EditCompleteHandler() {  
            public void onEditComplete(EditCompleteEvent event) {  
                // Updating chart data  
                chart.setData(grid.getRecords());  
            }  
        });  

        final DynamicForm chartSelector = new DynamicForm();  
        final SelectItem chartType = new SelectItem("chartType", "Chart Type");  
        chartType.setValueMap(  
                ChartType.AREA.getValue(),  
                ChartType.COLUMN.getValue(),  
                ChartType.LINE.getValue(),  
                ChartType.RADAR.getValue());  
        chartType.setDefaultToFirstOption(true);  
        chartType.addChangedHandler(new ChangedHandler() {  
            public void onChanged(ChangedEvent event) {  
                String selectedChartType = chartType.getValueAsString();  
                if (ChartType.AREA.getValue().equals(selectedChartType)) {  
                    chart.setChartType(ChartType.AREA);  
                } else if (ChartType.COLUMN.getValue().equals(selectedChartType)) {  
                    chart.setChartType(ChartType.COLUMN);  
                } else if (ChartType.LINE.getValue().equals(selectedChartType)) {  
                    chart.setChartType(ChartType.LINE);  
                } else if (ChartType.RADAR.getValue().equals(selectedChartType)) {  
                    chart.setChartType(ChartType.RADAR);  
                }  
            }  
        });  
        chartSelector.setFields(chartType);  
        VLayout layout = new VLayout(15);  
        layout.addMember(chartSelector);  
        layout.addMember(grid);  
        layout.addMember(chart);
        layout.draw();

What did I miss? Do I need to set something up?
I looked for a class FusionChart in all jar in FusionCharts package but with no luck.

best regards,
Zdary

[Isomorphic]

Your inherits are out of order.

Why are you trying to use FusionChart?

[zdary]

Yes, I am.

I'm trying to use ListGrid to produce FusionChart instead of FacetChart as you suggested previously

Cheers,
Zdary

[zdary]

Oh sorry, you asked why.
Our management demands it and I cannot change it. You said that listGrid supports FusionChart constructor. Is it possible?

What is the right import, please?

cheers,
Zdary

[Isomorphic]

Put PluginBridges before Analytics.