FacetChart

[ellisd5]

Hi all,

I have today upgraded our dev environment from 2.2 to 2.4 as I have a need to do some reporting and I see that charts is a new addition to SmartGWT.

Having searched this forum I found an example for a FacetChart and the same example (almost) is in the nightly builds for the showcase. My code based on that...

package com.serengetisystems.tcrm.client.tab;

import com.serengetisystems.srgutils.marker.Reloadable;
import com.serengetisystems.tcrm.client.pages.AbstractPage;
import com.serengetisystems.tcrm.client.util.DictionaryUtils;
import com.serengetisystems.tcrm.util.constants.DictionaryConstants;
import com.smartgwt.client.data.Record;
import com.smartgwt.client.types.ChartType;
import com.smartgwt.client.widgets.chart.FacetChart;
import com.smartgwt.client.widgets.cube.Facet;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.form.fields.events.ChangedEvent;
import com.smartgwt.client.widgets.form.fields.events.ChangedHandler;
import com.smartgwt.client.widgets.layout.VLayout;
import com.smartgwt.client.widgets.tab.Tab;

import java.util.HashMap;
import java.util.Map;

/**
 * TODO: code description here
 *
 * @author dale.ellis
 * @version 1.0
 * Version History
 * -----------------------------------------------------------------------------------
 * Changed By     When        Description
 * dale.ellis     13/05/11    Initial release
 */
public class ReportsTab extends AbstractPage implements Reloadable {

    public ReportsTab() {
        super("Reports");
        setPane(layout);
        layout.setWidth100();
        layout.setHeight100();
        layout.setMembersMargin(20);

        drawChart();
    }

    private void drawChart() {
        final FacetChart simpleChart = new FacetChart();

        simpleChart.setData(chartData);
        simpleChart.setValueProperty("sales");
        simpleChart.setChartType(ChartType.BAR); // Changed to BAR because example one doesn't exist
        simpleChart.setTitle("Sales by Product and Region");

        // Specify facets where ID is set to the key used for this facet in the data above
        // and title is the user-visible title you want in the chart
        Facet regionFacet = new  Facet("region", "Region");
        Facet productFacet = new Facet("product", "Product");
        //simpleChart.setFacets(regionFacet, productFacet); // Doesn't exist

        // This is a form which you can use to change the chart type
        DynamicForm chartSelector = new DynamicForm();
        SelectItem chartType = new SelectItem("chartType");
        chartType.setTitle("Chart Type");
        chartType.setValueMap("Bar", "Column","Line", "Radar");
        chartType.setDefaultValue("Area");

        // Add form to form
        chartSelector.setItems(chartType);
        layout.addMember(chartSelector);
        simpleChart.draw();
        layout.addMember(simpleChart);

        chartType.addChangedHandler(new ChangedHandler() {

            private Map<String, ChartType> chartTypes = new HashMap<String, ChartType>() {{
                put("Bar", ChartType.BAR);
                put("Column", ChartType.COLUMN);
                put("Line", ChartType.LINE);
                put("Radar", ChartType.RADAR);
            }};

            @Override
            public void onChanged(ChangedEvent event) {
                String typeName = (String)event.getValue();
                simpleChart.setChartType(chartTypes.get(typeName));
            }
        });



    }

    Record[] chartData = new Record[] {
        new SalesRecord("West", "Cars", 37),
        new SalesRecord("North", "Cars", 29),
        new SalesRecord("East", "Cars", 80),
        new SalesRecord("South", "Cars", 87),
        new SalesRecord("West", "Trucks", 23),
        new SalesRecord("North", "Trucks", 45),
        new SalesRecord("East", "Trucks", 32),
        new SalesRecord("South", "Trucks", 67),
        new SalesRecord("West", "Motorcycles", 12),
        new SalesRecord("North", "Motorcycles", 4),
        new SalesRecord("East", "Motorcycles", 23),
        new SalesRecord("South", "Motorcycles", 45)
    };

    class SalesRecord extends Record {
        SalesRecord(String region, String product, Integer sales) {
            setAttribute("region", region);
            setAttribute("product", product);
            setAttribute("sales", sales);
        }
    };

    @Override
    public void reload() {
        //To change body of implemented methods use File | Settings | File Templates.
    }
}

That is the example code, slightly tweaked, the issue I get is upon loading of the module, I get the following error...

com.google.gwt.core.client.JavaScriptException: (TypeError): Unable to get value of the property 'create': object is null or undefined
 description: Unable to get value of the property 'create': object is null or undefined
 number: -2146823281
	at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:195)
	at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:120)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:507)
	at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:264)
	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:188)
	at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
	at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
	at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
	at java.lang.reflect.Method.invoke(Method.java:597)
	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.BrowserChannel.reactToMessages(BrowserChannel.java:1669)
	at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:401)
	at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:222)
	at java.lang.Thread.run(Thread.java:662)

The code is more or less the same as the example except I have not used the line setFacets() for the FacetChart object as that method does not exist.

Is the error due to that piece of code not being present, so if that is removed, what do I use instead? There is a setFacetId() but that only suggests to take one ID, I took a punt and tried it but it did nothing different.

Any advice much appreciated as I really want to find out if this would be fit for purpose in my instance.

Thanks
Dale

[curiousgally]

Hi,

I don't think facet chart can be used directly in 2.4. But i remember using them to draw charts from List grid data, you have some method like chartData to which you can pass facets ,data as params.

api for reference (listgrid):

chartData
public FacetChart chartData(java.lang.String labelField,
                            java.lang.String[] dataFields,
                            Record[] dataRows,
                            FacetChart chartProperties,
                            boolean labelFieldFirst)Chart the data in this listGrid as a multi-series chart. 
Each row provides a series of data. Each series of data is labeled by a value from one column, called the labelField. 

For example, cell values are sales figures, and fields are "Product", "August", "September", "October". In this case each row gives a series: sales figures for each of 3 months. The labelField in this case is the "Product" field, meaning each row represents sales figures for each of 3 months for a particular product. This dataset can be charted via any multi-series chart: stacked or clustered bar or column chart, line chart with multiple lines, or area chart (stacked lines). 

By default, all visible fields other than the label field are assumed to be labels for series values, but an explicit list of fields can be provided as dataFields. 

By default, all data is charted if all data is loaded, otherwise, data visible in the viewport is charted. An explicit set of rows can be provided via dataRows. 


Parameters:
labelField - name of the field
dataFields - optional list of fields to use as labels. By default, all fields are used.
dataRows - set of records to chart. Can be obtained by eg grid.data.getRange().
chartProperties - properties to pass to the created chart
labelFieldFirst - if true, use the labelField as the "first" set of labels, for example, as the bar labels in a stacked bar chart, whereas the second set of labels would appear as the legend. 
Returns:
created Chart instance

Nightly build supports direct charting with FacetChart class and it has appropriate methods like setFacets by which you can configure the chart.

Hope this helps

[ellisd5]

Yes that is very helpful,

Thanks for the reply, I'll have a play with ListGrid method.

Cheers,
Dale

[ellisd5]

hmm unless I'm mistaken seems I need Analytics Module to do charting? So I would need Power license?

Couldn't get ListGrid to work, complaining about attribute "duplicate" not set or null from memory.

Before I evaluate the Power Edition or EE, can anyone confirm, will charts not work without the Analytics & drawing Modules or can I get a simple chart working with basic free licensed edition?

Thanks,
Dale

[Isomorphic]

Yes, charting as a whole is part of the Analytics module - see this page for the full breakdown.

[ESuetina]

Yes, charting as a whole is part of the Analytics module - see this page for the full breakdown.

HI,
I followed the given example of creating a chart, but tI have a probelm.
I downloaded the evaluation version of smart gwt ee, and added analytics and drawing jars to the build path, as well as smartgwt jar, but
simpleChart.setFacets(regionFacet, productFacet);
still does not compile. Would you please indicate me the issue?
Thx

[curiousgally]

The order in which you inherit the modules in the gwt.xml could be the issue.
Try reordering and it will work , me too faced similar issue.

[Isomorphic]

If it's a compile error, that seems like you're using a code sample from a nightly build with an older build - being able to setFacets() directly on a FacetChart was not possible in 2.4, but has been possible in nightlies for months.

[ESuetina]

If it's a compile error, that seems like you're using a code sample from a nightly build with an older build - being able to setFacets() directly on a FacetChart was not possible in 2.4, but has been possible in nightlies for months.

That was it, thanks

[dguzman]

I am getting the following error "unable to get value of the property 'created' object is null or undefined", i don't know what is happening.

I am using:

- smartgwtpro-3.1p
- Browser internet explorer 9

I also have a doubt, do i need Analytics module in smartgwtpro-3.1?

Because i read license support and there said that Analytics module is only required for charts in smartgwt 2.4

[dguzman]

Multi series chart

Based on this demo: http://www.smartclient.com/smartgwtee/showcase/#threePlusChartMA, I thought it was possible to create a chart like the image rEYgo.jpgthat is attached.

From what I've seen, I would need to use 3 stacked area series and 4 line series in a multi-axis type of chart to achieve this result. But as far as I've been able to see, whenever I add the stacked area series, the charting component expects me to add the same amount (3) of line series, for it to chart on the secondary axis, which is not what I need.

I'm a missing something here? can this type of chart be achieved with this component? how?

[Isomorphic]

Try providing more complete information. This chart has no data labels on the Y or X axis, we have no idea if the three stacked areas have the same X and Y axis labels or different values.