Craig - 2012-01-24

Using SmartGWT 2.5 or 3.0, gwt-highcharts 1.1.1, jQuery 1.6.2, and Highcharts 2.1.7 in any browser (most frequently tested in IE9 though).

In certain situations, if you minimize/maximize the browser window (sometimes going from min-to-max works better than max-to-min) after the window first loads (so basically hit refresh then minimize/maximize), the chart won't resize. Every subsequent resize will allow the chart to resize properly though.

Using the sample code I provide below, I was able to notice the chart resizing to the proper size and then snapping back to its original size. I don't know if that helps much, but it was kind of interesting to see.

This is also exclusive to the charts. Standard SmartGWT components don't exhibit this behavior.

Anyway, here's the sample code. It's a little convoluted but it closely represents the siutation that made us first encounter the problem. Anyway, let me know if there is anything we can do to fix/work around the problem.

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.widgets.Canvas;
import com.smartgwt.client.widgets.WidgetCanvas;
import com.smartgwt.client.widgets.events.DrawEvent;
import com.smartgwt.client.widgets.events.DrawHandler;
import com.smartgwt.client.widgets.events.ResizedEvent;
import com.smartgwt.client.widgets.events.ResizedHandler;
import com.smartgwt.client.widgets.layout.Layout;
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.Series;

public class MainEntryPoint implements EntryPoint
{
    @Override
    public void onModuleLoad()
    {
        Chart chart = new Chart();
        chart.setChartTitleText("Test");
        chart.setType(Series.Type.LINE);

        Series series = chart.createSeries();
        series.addPoint(1);
        series.addPoint(2);
        series.addPoint(4);
        series.addPoint(8);
        series.addPoint(16);

        chart.addSeries(series);

        final Canvas canvas = new Canvas();
        canvas.setWidth(300);
        canvas.setHeight(800);
        canvas.setCanDragReposition(true);
        canvas.setCanDragResize(true);
        canvas.addChild(wrapForDisplay(chart));

        final Layout layout = new Layout();
        layout.setWidth100();
        layout.setHeight100();
        layout.addResizedHandler(new ResizedHandler()
        {
            @Override
            public void onResized(ResizedEvent event)
            {
                canvas.setWidth((int)(.5 * layout.getWidth()));
                canvas.setHeight((int)(.5 * layout.getHeight()));
            }
        });

        layout.addMember(canvas);
        layout.draw();
    }

    public WidgetCanvas wrapForDisplay(final Chart chart)
    {
        // wrapping chart in widgetcanvas per this suggestion: http://sourceforge.net/p/gwt-highcharts/discussion/general/thread/5d4c52d4/?limit=50&page=0#d9f5
        final WidgetCanvas chartCanvas = new WidgetCanvas(chart);
        chartCanvas.addResizedHandler(new ResizedHandler()
        {
            @Override
            public void onResized(ResizedEvent event)
            {
                chart.setSize(chartCanvas.getWidth(), chartCanvas.getHeight(), false);
            }
        });
        chartCanvas.addDrawHandler(new DrawHandler()
        {
            @Override
            public void onDraw(DrawEvent event)
            {
                chart.setSize(chartCanvas.getWidth(), chartCanvas.getHeight(), false);
            }
        });

        chartCanvas.setHeight100();
        chartCanvas.setWidth100();
        return chartCanvas;
    }
}
 

Last edit: Craig 2012-01-25