Chart not render correctly when maximizing / restoring window or dragging resize bar (SmartGWT)

Question

I am new to SmartGWT and having this issue for long time and could not fix it.

The charts are not in the right position and not resized after I maximize / restore the window, the same issue exists when I drag the resize bar in the window. However after I drag the edge of the window, even just a little, the charts can be rendered correctly. (looks like there is a delay or something)

I want my charts can render correctly immediately the window is maximized / restored, or when I drag the resize bar. NOT trying to drag the edge of the window every time to correct it.

Please take a look at the below simple case: (I am using HighCharts for charting)

import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Point;
import org.moxieapps.gwt.highcharts.client.Series;
import org.moxieapps.gwt.highcharts.client.ToolTip;
import org.moxieapps.gwt.highcharts.client.ToolTipData;
import org.moxieapps.gwt.highcharts.client.ToolTipFormatter;
import org.moxieapps.gwt.highcharts.client.labels.PieDataLabels;
import org.moxieapps.gwt.highcharts.client.plotOptions.PiePlotOptions;
import org.moxieapps.gwt.highcharts.client.plotOptions.PlotOptions;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.VLayout;

public class Test1 implements EntryPoint {

    public void onModuleLoad() {

        Window.enableScrolling(true);
        Window.setMargin("0px");

        HLayout mainLayout = new HLayout();
        mainLayout.setWidth100();
        mainLayout.setHeight100();

        VLayout vl1 = new VLayout();
        vl1.setWidth(250);
        vl1.setHeight100();
        vl1.setShowResizeBar(true);

        VLayout vl2 = new VLayout();

        vl2.setWidth100();
        vl2.setHeight100();

        HLayout top = new HLayout();
        HLayout bottom = new HLayout();
        VLayout topLeft = new VLayout();
        VLayout topRight = new VLayout();
        VLayout bottomLeft = new VLayout();
        VLayout bottomRight = new VLayout();

        topLeft.addMember(drawCharts());
        topRight.addMember(drawCharts());
        bottomLeft.addMember(drawCharts());
        bottomRight.addMember(drawCharts());

        top.setMembers(topLeft, topRight);
        bottom.setMembers(bottomLeft, bottomRight);

        vl2.setMembers(top, bottom);

        mainLayout.setMembers(vl1, vl2);

        RootPanel.get().add(mainLayout);
    }

    private Chart drawCharts() {

        final Chart chart = new Chart()
                .setType(Series.Type.PIE)
                .setPlotBackgroundColor((String) null)
                .setPlotBorderWidth(null)
                .setPlotShadow(false)
                .setOption("/chart/marginTop", 0)
                .setOption("/chart/marginBottom", 10)
                .setPiePlotOptions(
                        new PiePlotOptions()
                                .setAllowPointSelect(true)
                                .setCursor(PlotOptions.Cursor.POINTER)
                                .setPieDataLabels(
                                        new PieDataLabels().setEnabled(false))
                                .setShowInLegend(true))
                .setToolTip(new ToolTip().setFormatter(new ToolTipFormatter() {
                    public String format(ToolTipData toolTipData) {
                        return "<b>" + toolTipData.getPointName() + "</b>: "
                                + toolTipData.getYAsDouble() + " %";
                    }
                }));
        chart.addSeries(chart
                .createSeries()
                .setName("Browser share")
                .setPoints(
                        new Point[] {
                                new Point("Firefox", 45.0),
                                new Point("IE", 26.8),
                                new Point("Chrome", 12.8).setSliced(true)
                                        .setSelected(true),
                                new Point("Safari", 8.5),
                                new Point("Opera", 6.2),
                                new Point("Others", 0.7) }));

        return chart;
    }
}

Do I need to add a resize handler to fix this problem?

Or it may be the problem of the charts layout? I divided the area into four parts (top_left, top_right, bottom_left, bottom_right) and put chart into each part.

Anyone knows how to fix this problem which troubles me a long time? Appreciated.

score 1 · Accepted Answer · answered Jun 22 '12 at 06:36

1

First of all, I believe your browser share is not very accurate (Lol).

Taking a quick look at your code, it seems that you're mixing GWT charts with SmartGWT, which is not fully supported.

You will have to add some manual handling of the resizes events here.

Take a look at this post :

http://forums.smartclient.com/showthread.php?t=8159#aContainer

and the brief explanation is right here :

http://forums.smartclient.com/showthread.php?t=8159#aMix

answered Jun 22 '12 at 06:36

Jean-Michel Garcia

2,359
2
23
44

ah, I see. Thanks for your comments and that's really useful. The charting library I used is indeed a third-party GWT widgets. I think SmartGWT also have its own charting widgets called FacetCharts, is that free to use? Thanks. – sozhen Jun 22 '12 at 14:17
1

@SongtaoZ Charts are not part of the LGPL version. you have to have at least the pro version to have access to the HTML5 charts – Jean-Michel Garcia Jul 01 '12 at 01:30
Ah, I see. I am going to use HighCharts instead. Thanks for your info! – sozhen Jul 01 '12 at 04:42

Chart not render correctly when maximizing / restoring window or dragging resize bar (SmartGWT)

1 Answers1