Question

I’m currently building a SmartGWT-based web application (using the Portlet Layout). So I have several “Portlet”, which basically extend GWT Window with different content. Now I want a Portlet to display Dygraphs. So I’ve created an RPC Service implementation which returns a JSON String (based on a DataTable object).

Since I cannot directly serialize a DataTable object I use

String json = JsonRenderer.renderDataTable(data, true, true).toString();

where “data” is of type DataTable.

Now this String gets correctly passed to the client side where I want to create the Dygraph. In this thread , someone suggested to use

public static native DataTable toDataTable(String json) 
/-{ return new $wnd.google.visualization.DataTable(eval("(" + json + ")")); }-/;

If I use this in my GWT client code, i get an error saying

com.google.gwt.core.client.JavaScriptException: (TypeError): $wnd.google.visualization is undefined

Do i miss some “import” of the visualization API? Where do i have to instantiate it?

Or is there another way to get the JSON datastring into the Dygraph? I can’t find any examples…

Thank you for any hint!

Answer 1

I assume you have included the visualization.jar and the visualization namespace in your module’s XML

<inherits name="com.google.gwt.visualization.Visualization"/>

This will give you the Classes. You probably have done this otherwise you would have gotten a compiler error.

However you also have to include the actual visualization javascript file from the google servers (the visualization.jar is only a wrapper). This can be done in two different ways:

1.) Include it in the host page:

<script type="text/javascript">
        google.load("visualization", "1", {'packages' : ["corechart"] });
</script>

or

2.) Load it dynamically where you need it:

VisualizationUtils.loadVisualizationApi(onLoadCallback, MotionChart.PACKAGE);

see http://code.google.com/docreader/#p=gwt-google-apis&s=gwt-google-apis&t=VisualizationGettingStarted

Btw. I have forked the Dygraphs Project and changed the GWT wrapper to more like the other visualization wrappers. You can check it out here: https://github.com/timeu/dygraphs

Edit: I have a new GWT wrapper for dygraphs that uses the GWT 2.8’s new JsInterop: https://github.com/timeu/dygraphs-gwt

Note: I changed some behaviour in dygraphs and added some features which weren’t available in the upstream code.