Setting chart height flow to fit its container (HighCharts / GWT)

[Songtao Z]

I am pretty new user to both SmartGWT and HighCharts for developing client-side user interface. I try to put a dashboard view in the main layout with four charts/tables.

I actually want to set a reflow attribute to the chart so that both the width and height can fit the container on resizing of the window.

.setReflow(boolean reflow)

method in GWT-HighCharts library can only set the width of the chart flowing with its container resizing, however the height of the chart does not quite change with the size of its window and I have to scroll down the window to see the whole charts.

Any one have suggestions or comments about how to fit the height of the chart to its container as well?

Below is a simple case for demonstration of my question:

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 Test implements EntryPoint {

    public void onModuleLoad() {

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

        VLayout vl = new VLayout();
        vl.setWidth100();
        vl.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);

        vl.setMembers(top, bottom);

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

    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;
    }
}

Any suggestion and comments will be appreciated, thanks!

[Shawn Quinn]

You'll probably actually want to disable the "setReflow()" option if you're trying to run a chart within a resizeable SmartGWT panel. Checkout the "ResizeableChartCanvas" (which is a SmartGWT component) in the following post, and let us know if that resolves what you're trying to accomplish.

https://sourceforge.net/p/gwt-highcharts/discussion/general/thread/c06210f1/036d/

Also note the following thread if you're using SmartGWT resize bars:

https://sourceforge.net/p/gwt-highcharts/discussion/general/thread/abe7bf7e/

Hope that helps, but just let us know if you run into trouble.