CODEWITHSUNDEEP
javajavascriptgwtcharts
AlejandroVK
AlejandroVK

Reputation: 7605

responsive Google Chart with GWT

I'm trying to create a responsive Google Chart in a GWT app. By responsive, I mean that it adapts width (probably height too) to the browser size. You can check this behaviour here.

Some people suggest how to do this, but this comes in the form of Google Charts Javascript version, not the GWT one. In GWT, the Options object has a setWidth method that expects and int value, thus, a percentage is not allowed here. I tried to use a more generic attribute specification procedure:

 Options options = Options.create();
 //options.setWidth(600);
 options.set("width", "100%");

But this results in the Chart not drawing at all...to me it seems that if the width is not specified it won't be drawn at all.

I guess I could try to capture the window.resize event, but I'm not really sure about how to do this from the Java client side in GWT...any ideas/suggestions?

Thanks! Alex

Upvotes: 0

Views: 707

Answers (1)

Ümit
Ümit

Reputation: 17489

Percentage dimensions unfortunately won't work with google chart tools. You have to specify explicit dimensions.
There are a couple of workarounds to make the charts responsive in GWT.

  • Use the unofficial GWT chart tools wrapper gwt-charts tools. It supports responsive charts out of the box. In additional to this it also has wrapper for new additions to the chart tools (DataRoles, Controls and Dashboard, etc). The official wrapper hasn't had any update for years.
  • Extend the official chart wrappers and add responsive functionality.

Solution: 

ResponsiveColumnChart extends ColumnChart implements RequiresResize {

    protected Options options;
    protected AbstractDataTable data;

    public ResizeableColumnChart(AbstractDataTable data, Options options) {
        super(data, options);
        this.data = data;
        this.options = options;
    }

    @Override
    public void onResize() {
        options.setWidth(getParent().getOffsetWidth());
        options.setHeight(getParent().getOffsetHeight());
        draw(data, options);
    }

    public void draw2(AbstractDataTable data2, Options options) {
        this.data = data2;
        this.options = options;
        draw(data2,options);
    }
}

This is somehow a hack because Options and AbstractDataTable are private in the official wrappers. As a result you have to add them again to the extended class in order to access them. Furthermore the onLoad() method of the official sets both Options and AbstractDataTable to null, so you can't access them in the onResize() method.

Of course in order to work properly you have to add the new charts to a LayoutPanel or a panel that implements ProvidesResize otherwise the onResize() method is not called.

  • Fork the official GWT chart wrapper and add the above functionality directly there.

I would recommend to switch to the gwt-charts wrapper as it has more recent than the outdates official google chart wrapper for GWT.

Upvotes: 2

Related Questions