Google's new [geochart][1] do display Heat Map looks very cool but
currently it does not have GWT wrapper (at leaset I couldn't fine one).
I tried to play with the Visualization API for GWT gut it generated
different output.
For example here is how I tried to convert that JS that they showed on the
page to GWT using Visualization API:
public class VisualizingWidget extends Composite {
>
> private static VisualizingWidgetUiBinder uiBinder = GWT
> .create(VisualizingWidgetUiBinder.class);
>
> interface VisualizingWidgetUiBinder extends
> UiBinder<Widget, VisualizingWidget> {
> }
>
> @UiField
> VerticalPanel visualizationHolder;
>
> public VisualizingWidget() {
> initWidget(uiBinder.createAndBindUi(this));
> Runnable onLoadCallbackGeochart = new Runnable() {
> public void run() {
> AbstractDataTable data = createLineTable();
> IntensityMap.Options options = createOptions();
> IntensityMap imMap = new IntensityMap(data, options);
>
> Window.alert(imMap.toString());
>
> visualizationHolder.add(imMap);
> }
> };
>
> VisualizationUtils.loadVisualizationApi(onLoadCallbackGeochart,
> IntensityMap.PACKAGE);
>
> };
>
> private IntensityMap.Options createOptions() {
> IntensityMap.Options optionsIm = IntensityMap.Options.create();
> optionsIm.setWidth(400);
> optionsIm.setHeight(240);
> optionsIm.setRegion(Region.EUROPE);
> optionsIm.setShowOneTab(true);
> 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;
> }
> }
But the output is totally different. Here is what I'm getting:
<https://lh5.googleusercontent.com/-tIbCtrtmzMw/T4mHyCmfwRI/AAAAAAAAjTQ/AVzA6aOJa90/s1600/Screen+Shot+2012-04-14+at+7.15.36+AM.png>
How can I re-write that JavaScript using JSNI to display similar map as
shown on
THIS<https://google-developers.appspot.com/chart/interactive/docs/gallery/geochart#markerexample>page
and then place it into some panel on my GWT page.
Thanks
--
You received this message because you are subscribed to the Google Groups
"Google Web Toolkit" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-web-toolkit/-/gRVHKHg0brcJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-web-toolkit?hl=en.
