Chart Example

[kodanhunt]

Hi,

I'm trying to do a example for FacetChart by using Nightly build. I couldn't able to get the chart in UI. Please see below for my code.

public void onModuleLoad() {
		final FacetChart chart = new FacetChart();
        chart.setData(LogScalingChartData.getData());
        chart.setFacets(new Facet("region", "Region"), new Facet("product", "Product"));
        chart.setValueProperty("sales");
        chart.setChartType(ChartType.AREA);
        chart.setTitle("Sales by Product and Region");
        chart.setHeight(500);
        chart.setWidth(500);
        chart.draw();
        chart.show();
        chart.bringToFront();
RootPanel.get("root").add(chart);
}

And the data class is as follows.

import com.smartgwt.client.data.Record;

public class LogScalingChartData extends Record {

    public LogScalingChartData(String region, String product, Integer sales) {
    	setAttribute("region", region);
        setAttribute("product", product);
        setAttribute("sales", sales);
    }

    public static LogScalingChartData[] getData() {
    	return new LogScalingChartData[] {
                new LogScalingChartData("West", "Cars", 37),
                new LogScalingChartData("North", "Cars", 29),
                new LogScalingChartData("East", "Cars", 80),
                new LogScalingChartData("South", "Cars", 87),

                new LogScalingChartData("West", "Trucks", 23),
                new LogScalingChartData("North", "Trucks", 45),
                new LogScalingChartData("East", "Trucks", 32),
                new LogScalingChartData("South", "Trucks", 67),

                new LogScalingChartData("West", "Motorcycles", 12),
                new LogScalingChartData("North", "Motorcycles", 4),
                new LogScalingChartData("East", "Motorcycles", 23),
                new LogScalingChartData("South", "Motorcycles", 45)
            };
    }

}

When I searched using firebug in the browser, I get the below HTML.

<div id="root">
<div id="isc_FacetChart_0_wrapper">
<div id="isc_0" class="normal" onscroll="return isc_FacetChart_0.$lh()" style="POSITION:relative;LEFT:0px;TOP:0px;WIDTH:500px;HEIGHT:500px;Z-INDEX:800018;-moz-box-sizing:border-box;-moz-outline-offset:-1px;OVERFLOW:-moz-scrollbars-none;" eventproxy="isc_FacetChart_0">
<div id="isc_1" style="POSITION:relative;VISIBILITY:inherit;Z-INDEX:800018;CURSOR:default;" eventproxy="isc_FacetChart_0">&nbsp;</div>
</div>
</div>
</div>

Here is my inheritance in .gwt.xml file

        <inherits name='com.google.gwt.user.User'/>
 	<inherits name="com.smartgwt.SmartGwt"/>
 	<inherits name="com.smartgwt.Analytics"/>
	<inherits name="com.smartgwt.Drawing"/>

Can you please let me know what I'm missing and what is the issue with this code??

I have enabled the Analytics and Drawing module in this project.

[Isomorphic]

See the QuickStart Guide - don't use RootPanel.add(), use draw().

See the FAQ for the rest of the information you need to post.

[kodanhunt]

Thanks, I got it at last. It works fine now. The problem is with the inheritance. After reversing the inheritance like below, it worked.

<inherits name='com.google.gwt.user.User'/>
<inherits name="com.smartgwt.SmartGwt"/>
<inherits name="com.smartgwt.Drawing"/>
<inherits name="com.smartgwt.Analytics"/>

This change has been mentioned in the FacetChart javadoc.