GeoChart in GWT

[Maksim Ustinov]

How can one draw a GeoChart with markers in GWT?

I tried to find a example of that but had no luck of finding anything I also tried to create my own wrapper following THIS official document but I complained when I tried to make following method if my wrapper:

  @Override
  protected native JavaScriptObject createJso(Element parent) /*-{
    return new $wnd.google.visualization.GeoChart(parent);
  }-*/;

This is the error: com.google.gwt.core.client.JavaScriptException: (TypeError): $wnd.google.visualization.GeoChart is not a constructor 

Any pointers would greatly appreciated.

[Maksim Ustinov]

I just tried to include this script file in my .html file

<script type='text/javascript' src='https://www.google.com/uds/api/visualization/1.0/4da66c523f1d12b8ccaa094c46341418/format+en,default,geochart.I.js'> </script>

and I got the map showing! but when I'm setting region it is telling me that there is no such region ('Requested map does not exist.×')

I know that I'm doing it wrong but I don't see any other ways right now to implement it.

[Maksim Ustinov]

This is what I did in my wrapper:

package com.marathonizer.client.widgets;

import com.google.gwt.ajaxloader.client.ArrayHelper;

import com.google.gwt.core.client.JavaScriptObject;

import com.google.gwt.core.client.JsArray;

import com.google.gwt.core.client.JsArrayString;

import com.google.gwt.dom.client.Element;

import com.google.gwt.visualization.client.AbstractDataTable;

import com.google.gwt.visualization.client.AbstractDrawOptions;

import com.google.gwt.visualization.client.Selectable;

import com.google.gwt.visualization.client.Selection;

import com.google.gwt.visualization.client.events.SelectHandler;

import com.google.gwt.visualization.client.visualizations.Visualization;

public class HeatMap extends Visualization<HeatMap.Options> implements Selectable {

/**

  * Options for drawing the chart.

  * 

  */

 public static class Options extends AbstractDrawOptions {

   public static Options create() {

     return JavaScriptObject.createObject().cast();

   }

   protected Options() {

   }

   public final native void setColors(JsArrayString colors) /*-{

     this.colors = colors;

   }-*/;

   public final void setColors(String... colors) {

     setColors(ArrayHelper.toJsArrayString(colors));

   }

   public final native void setHeight(int height) /*-{

     this.height = height;

   }-*/;

   public final void setRegion(String region) {

    setRegionJSNI(region.toLowerCase());

   }

   

   public final void setDisplayMode(DisplayMode displayMode ) {

    setDisplayMode(displayMode.name().toLowerCase());

   

   }

   public final native void setShowOneTab(boolean show) /*-{

     this.showOneTab = show;

   }-*/;

   public final void setSize(int width, int height) {

     setWidth(width);

     setHeight(height);

   }

   public final native void setWidth(int width) /*-{

     this.width = width;

   }-*/;

   private native void setRegionJSNI(String region) /*-{

     this.region = region;

   }-*/;

   

   private native void setDisplayMode(String displayMode) /*-{

     this.displayMode = displayMode;

   }-*/;

   

 }

//  /**

//   * Argument to {@link IntensityMap.Options#setRegion(String)}

//   */

//  public static enum Region {

//    AFRICA, ASIA, EUROPE, MIDDLE_EAST, SOUTH_AMERICA, USA, WORLD

//  }

//  

 public static enum DisplayMode {

 MARKERS, REGIONS, AUTO;

 }

 public static final String PACKAGE = "geochart";

 public HeatMap() {

   super();

 }

 public HeatMap(AbstractDataTable data, Options options) {

   super(data, options);

 }

 public final void addSelectHandler(SelectHandler handler) {

   Selection.addSelectHandler(this, handler);

 }

 public final JsArray<Selection> getSelections() {

   return Selection.getSelections(this);

 }

 public final void setSelections(JsArray<Selection> sel) {

   Selection.setSelections(this, sel);

 }

 @Override

 protected native JavaScriptObject createJso(Element parent) /*-{

   return new $wnd.google.visualization.GeoChart(parent);

 }-*/;

}

And here is my GWT Widget:

package com.marathonizer.client.widgets;

import com.google.gwt.core.client.GWT;

import com.google.gwt.uibinder.client.UiBinder;

import com.google.gwt.uibinder.client.UiField;

import com.google.gwt.user.client.ui.Composite;

import com.google.gwt.user.client.ui.VerticalPanel;

import com.google.gwt.user.client.ui.Widget;

import com.google.gwt.visualization.client.AbstractDataTable;

import com.google.gwt.visualization.client.AbstractDataTable.ColumnType;

import com.google.gwt.visualization.client.DataTable;

import com.google.gwt.visualization.client.VisualizationUtils;

public class VisualizingWidget extends Composite {

private static VisualizingWidgetUiBinder uiBinder = GWT.create(VisualizingWidgetUiBinder.class);

interface VisualizingWidgetUiBinder extends UiBinder<Widget, VisualizingWidget> {

}

HeatMap.Options options;

@UiField

VerticalPanel visualizationHolder;

HeatMap imMap;

public VisualizingWidget() {

initWidget(uiBinder.createAndBindUi(this));

final Runnable onLoadCallbackGeochart = new Runnable() {

public void run() {

AbstractDataTable data = createLineTable();

options = createOptions();

imMap = new HeatMap(data, options);

visualizationHolder.add(imMap);

}

};

VisualizationUtils.loadVisualizationApi(onLoadCallbackGeochart,HeatMap.PACKAGE);

};

private HeatMap.Options createOptions() {

HeatMap.Options optionsIm = HeatMap.Options.create();

// optionsIm.setWidth(400);

optionsIm.setHeight(500);

// optionsIm.setRegion("US"); <-- ERROR HERE

optionsIm.setColors("green", "blue");

return optionsIm;

}

private DataTable createLineTable() {

DataTable data = DataTable.create();

data.addColumn(ColumnType.STRING, "City");

data.addColumn(ColumnType.NUMBER, "Population");

data.addColumn(ColumnType.NUMBER, "Area");

data.addRows(8);

data.setValue(0, 0, "Rome");

data.setValue(0, 1, 2761477);

data.setValue(0, 2, 1285.31);

data.setValue(1, 0, "Milan");

data.setValue(1, 1, 1324110);

data.setValue(1, 2, 181.76);

data.setValue(2, 0, "Naples");

data.setValue(2, 1, 959574);

data.setValue(2, 2, 117.27);

data.setValue(3, 0, "Turin");

data.setValue(3, 1, 907563);

data.setValue(3, 2, 130.17);

data.setValue(4, 0, "Palermo");

data.setValue(4, 1, 655875);

data.setValue(4, 2, 158.9);

data.setValue(5, 0, "Genoa");

data.setValue(5, 1, 607906);

data.setValue(5, 2, 243.60);

data.setValue(6, 0, "Bologna");

data.setValue(6, 1, 380181);

data.setValue(6, 2, 140.7);

data.setValue(7, 0, "Florence");

data.setValue(7, 1, 371282);

data.setValue(7, 2, 102.41);

return data;

}

}

[Jinji]

Adding 

<script type='text/javascript' src='https://www.google.com/uds/api/visualization/1.0/4da66c523f1d12b8ccaa094c46341418/format+en,default,geochart.I.js'> </script>

is not supported, and may break in the future. Please use the documented API.

}

}

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/6juE23PIVCMJ.

To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[Maksim Ustinov]

I understand that, but that was the only way for me to make ti to work. is there any other way to do it?

To post to this group, send email to google-visualization-api@googlegroups.com.
To unsubscribe from this group, send email to google-visualization-api+unsub...@googlegroups.com.

[Jinji]

Your code seems OK. Can you use other charts (e.g, LineChart)? Can you use GeoChart using plain JS (no GWT)? That might help narrowing down the issue.

To view this discussion on the web visit https://groups.google.com/d/msg/google-visualization-api/-/8vC-dp8wawsJ.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.