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.

Answer 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