I'm don't know much about GXT, but you'll likely want to tie into some kind of a resize event on the "Viewport", and use that to control the size of the chart via the "setSize" method. E.g., here's a code snippet of how to set up a similar mechanism in SmartGWT:
final Canvas chartContainer = new Canvas();
final WidgetCanvas widgetCanvas = new WidgetCanvas(myChartWidget);
chartContainer.addResizedHandler(new ResizedHandler() {
public void onResized(ResizedEvent event) {
chart.setSize(chartContainer.getWidth(), chartContainer.getHeight(), false);
}
});
chartContainer.addDrawHandler(new DrawHandler() {
public void onDraw(DrawEvent event) {
chart.setSize(chartContainer.getWidth(), chartContainer.getHeight(), false);
}
});
chartContainer.addChild(widgetCanvas);
panel.addMember(chartContainer);
Note that the "Chart.setSizeToMatchContainer()" method you're using right now is simply a helper method that changes the width/height of the chart to match the size of the container the chart is within when you call the method. It doesn't have any way to track when the size of the container changes though, so you'll need to use a technique like what is noted above in order to keep the size of the chart in sync with whatever panel you have it in (if you want the chart to grow/shrink as the container size changes.)
Hope that helps, but just let us if you can't find a way to make that work in GXT.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
I tried to add highchart in GXT viewport unfortunately resize event is not working as expected.
import org.moxieapps.gwt.highcharts.client.Chart;
import org.moxieapps.gwt.highcharts.client.ChartSubtitle;
import org.moxieapps.gwt.highcharts.client.ChartTitle;
import org.moxieapps.gwt.highcharts.client.Legend;
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 com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
public class Home implements EntryPoint {
public void onModuleLoad() {
Viewport vp = new Viewport();
vp.setLayout(new BorderLayout());
Chart highchart = createChart();
highchart.setSizeToMatchContainer();
vp.add(highchart, new BorderLayoutData(LayoutRegion.CENTER));
RootPanel.get().add(vp);
}
public Chart createChart() {
final Chart chart = new Chart().setType(Series.Type.LINE).setMarginRight(130).setMarginBottom(25).setChartTitle(new ChartTitle().setText("Monthly Average Temperature").setX(-20) // center
).setChartSubtitle(new ChartSubtitle().setText("Source: WorldClimate.com").setX(-20)).setLegend(
new Legend().setLayout(Legend.Layout.VERTICAL).setAlign(Legend.Align.RIGHT).setVerticalAlign(Legend.VerticalAlign.TOP).setX(-10).setY(100).setBorderWidth(0)).setToolTip(new ToolTip().setFormatter(new ToolTipFormatter() {
public String format(ToolTipData toolTipData) {
return "" + toolTipData.getSeriesName() + "
" + toolTipData.getXAsString() + ": " + toolTipData.getYAsDouble() + "°C";
}
}));
chart.getXAxis().setCategories("Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec");
chart.getYAxis().setAxisTitleText("Temperature °C");
chart.addSeries(chart.createSeries().setName("Tokyo").setPoints(new Number[] { 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6 }));
chart.addSeries(chart.createSeries().setName("New York").setPoints(new Number[] { -0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5 }));
chart.addSeries(chart.createSeries().setName("Berlin").setPoints(new Number[] { -0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0 }));
chart.addSeries(chart.createSeries().setName("London").setPoints(new Number[] { 3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8 }));
return chart;
}
Any help appreciated.
Regards
Karthik
Last edit: Karthikeyan 2011-12-03
I'm don't know much about GXT, but you'll likely want to tie into some kind of a resize event on the "Viewport", and use that to control the size of the chart via the "setSize" method. E.g., here's a code snippet of how to set up a similar mechanism in SmartGWT:
final Canvas chartContainer = new Canvas(); final WidgetCanvas widgetCanvas = new WidgetCanvas(myChartWidget); chartContainer.addResizedHandler(new ResizedHandler() { public void onResized(ResizedEvent event) { chart.setSize(chartContainer.getWidth(), chartContainer.getHeight(), false); } }); chartContainer.addDrawHandler(new DrawHandler() { public void onDraw(DrawEvent event) { chart.setSize(chartContainer.getWidth(), chartContainer.getHeight(), false); } }); chartContainer.addChild(widgetCanvas); panel.addMember(chartContainer);Note that the "Chart.setSizeToMatchContainer()" method you're using right now is simply a helper method that changes the width/height of the chart to match the size of the container the chart is within when you call the method. It doesn't have any way to track when the size of the container changes though, so you'll need to use a technique like what is noted above in order to keep the size of the chart in sync with whatever panel you have it in (if you want the chart to grow/shrink as the container size changes.)
Hope that helps, but just let us if you can't find a way to make that work in GXT.