View Full Version : Using GWT Gauge in a GXT Portlet

23 Sep 2009, 3:29 AM
Hi folks. I have big problem in using gwt.visualization widgets like gauge for adding to a GXT portlet? can anyone tell me how could i do that? thanks so much

11 Nov 2009, 12:28 PM
I am using such an approach and it works :

First - create some abstract portlet class

public abstract class AbstractChartPortlet extends Portlet {

protected DataTable dataTable;

public AbstractChartPortlet(String title, int height, String url){

setLayout(new FitLayout());

Query query = Query.create(url);
query.send(new Callback() {

public void onResponse(QueryResponse response) {
if (response.isError()) {
Log.error("Error in query: " + response.getMessage() + ' ' + response.getDetailedMessage());
dataTable = response.getDataTable();


protected abstract void createChart();

then I have some certain implementation of Portlet that contains different gaugae,
for example :

public class BarChartPortlet extends AbstractChartPortlet{

private final static String DATA_URL = "some url";

public BarChartPortlet() {
super("Title", 250, DATA_URL);

protected void createChart() {
Options options = Options.create();
BarChart viz = new BarChart(dataTable, options);



and finally usage :

Portal portal = new Portal();
BarChartPortlet barPortlet = new BarChartPortlet();

Hope it helps

11 Nov 2009, 12:32 PM
BarChart comes from com.google.gwt.visualization.client.visualizations.BarChart so it is a gwt.visualization gauge.
In my example we connect to remote data source to get some data to be shown within bar chart.

12 Nov 2009, 1:48 AM
i think you use this one?

12 Nov 2009, 2:14 AM
to be more precious (I have listed BarChart code not Gauge code), Gauge code is listed below :

public class GaugePortlet extends AbstractChartPortlet {

private final static String DATA_URL = "some url";

public GaugePortlet() {
super("Title", 250, DATA_URL);

protected void createChart() {
Gauge.Options options = Gauge.Options.create();
options.setGaugeRange(0, 24);
options.setGreenRange(0, 6);
options.setYellowRange(6, 12);
options.setRedRange(12, 24);
Gauge gauge = new Gauge(dataTable, options);
add(gauge );


usage : create instance of this class and add it to your portal

8 Jun 2010, 6:31 AM
I agree - I have no problems with this - portlets and all visulaizations work OK. Do make sure you are getting the gwt / gxt container to render - sometime you will need to use a layout(true) call to force it to refresh once this google viz is loaded and drawn.

16 Jul 2010, 1:38 AM

I'm new to GWT and GXT. I'm very interested in using Google Visualizations within a GXT Portlet. I've used the source code of the GXT Portal demo and the code shown within this thread. I used a line chart of Google's Visualization API. After the start of the GXT portal, the line chart is displayed within the respective portlet. Unfortunately, after a drag and drop of the chart's portlet to another row, the chart disappears and an empty portlet in the original size will be shown. I have tried to call the layout method of the respective portlet, without success. Please can you give me some hints how to display the line chart again after an drag and drop of the respective portlet.

Thank you in advance.

16 Jul 2010, 1:43 AM
for me the "layout(true)" call always seems to work, but you can also try the underlying draw commands on the Google Visualization object itself (see the google visualization api docs) .. Make sure you use the force = true argument in the layout call though.

16 Jul 2010, 1:44 AM
Oh - and make sure the layout(true) call is on the Content Panel of the portlet, not the portlet

16 Jul 2010, 2:10 AM
Maybe this is a stupid question. How can I invoke layout(true) of the portlet's Content Panel? The Portlet inherits the layout(boolean) method from LayoutContainer.

27 Nov 2013, 10:57 AM
Very interesting and useful tips I think.I read step by step this informations and help me so much