1.5 and Google Visualizations - JSNI problem

[Jeremiah Elliott]

I am trying to get google visualizations working in my gwt app (gwt 1.5.0) .

I added this to my html:
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

I have this method in my gwt code:

public static native void getVisual() /*-{
google.load("visualization", "1", {packages:["piechart"]});
function drawChart() {
var data = new $wnd.@google.visualization::DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);

var chart = new
google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title:
'My Daily Activities'});
}
}-*/;

Whenever i compile, however, i get this error:
Line 369: Unresolvable native reference to type 'google.visualization'
Line 369 is: var data = new $wnd.@google.visualization::DataTable();

I am not a javascript developer, and as such have never used jsni
before. The two resources that I have been referencing are:
http://code.google.com/apis/visualization/documentation
and
http://code.google.com/webtoolkit/documentation/com.google.gwt.doc.DeveloperGuide.JavaScriptNativeInterface.html

Thanks -
Jeremiah

[Thomas Broyer]

On 30 mai, 05:53, "Jeremiah Elliott" wrote:
> I am trying to get google visualizations working in my gwt app (gwt 1.5.0) .
>
> I added this to my html:
> <script type="text/javascript" src="http://www.google.com/jsapi"></script>
>
> I have this method in my gwt code:
>
> public static native void getVisual() /*-{
> google.load("visualization", "1", {packages:["piechart"]});

$wnd.google.load(...

because the jsapi script is loaded in your HTML page, not in the
iframe that actually runs the GWT compiled script.

> function drawChart() {
> var data = new $wnd.@google.visualization::DataTable();

This is for when you have a google.visualization class *in java*
(compiled to javascript by GWTCompiler), with a "public /something/
DataTable()" method, and $wnd is an instance of that
google.visualization class.
This is clearly not the case here, hence the error.

var data = new $wnd.google.visualization.DataTable();

> data.addColumn('string', 'Task');
> data.addColumn('number', 'Hours per Day');
> data.addRows(5);
> data.setValue(0, 0, 'Work');
> data.setValue(0, 1, 11);
> data.setValue(1, 0, 'Eat');
> data.setValue(1, 1, 2);
> data.setValue(2, 0, 'Commute');
> data.setValue(2, 1, 2);
> data.setValue(3, 0, 'Watch TV');
> data.setValue(3, 1, 2);
> data.setValue(4, 0, 'Sleep');
> data.setValue(4, 1, 7);
>
> var chart = new
> google.visualization.PieChart(document.getElementById('chart_div'));

Why did you get it (almost) right here, but wrong above? ;-)

var chart = new $wnd.google.visualization.PieChart(...

[Jeremiah Elliott]

Thomas - thanks for the reply,

here is the current method:

public static native void getVisual() /*-{

$wnd.google.load("visualization", "1", {packages:["piechart"]});
function drawChart() {

var data = new $wnd.google.visualization.DataTable();
data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
var chart = new

$wnd.google.visualization.PieChart(document.getElementById('chart_div'));

chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My
Daily Activities'});
}
}-*/;

Now, when i call the function the entire screen goes blank, in the
hosted browser and in external browsers.

Firebug reports this however:
com_google_gwt_lang_Exceptions_caught__Ljava_lang_Object_2 is not defined
com_google_gwt_user_client_DOM_dispatchEventAndCatch__Lcom_google_gwt_user_client_Event_2Lcom_google_gwt_user_client_Element_2Lcom_google_gwt_user_client_EventListener_2Lcom_google_gwt_core_client_GWT$UncaughtExceptionHandler_2(undefined,
undefined, undefined, undefined)369BA166...ache.html (line 4826)
com_google_gwt_user_client_DOM_dispatchEvent__Lcom_google_gwt_user_client_Event_2Lcom_google_gwt_user_client_Element_2Lcom_google_gwt_user_client_EventListener_2(click
clientX=96, clientY=185, div.txclick, )369BA166...ache.html (line
4813)
com_google_gwt_user_client_impl_DOMImplStandard_dispatchEvent()(click
clientX=96, clientY=185)369BA166...ache.html (line 5257)
[Break on this error] $e0 =
com_google_gwt_lang_Exceptions_caught__Ljava_lang_Object_2($e0);

firebug is also reporting that the gaspi script is already downloaded
when this happens.
Once again this is my first use of jsni, so don't assume i know what i
am doing here - It could be a very easy/stupid problem.

-Jeremiah Elliott

[todd....@gmail.com]

I had a similar problem with trying to add Google Gadgets to my
application. No matter what I tried as soon as I would attach a panel
with a Gadget everything would blank out. I do not know the reason for
it working but loading the Gadget into a NamedFrame seemed to fix it.
Now I know that does not help you with your problem sine you are not
trying to load something from a URL but it might help give insight.

It is probably a XSS security issue.

> On Fri, May 30, 2008 at 5:17 AM, Thomas Broyer <t.bro...@gmail.com> wrote:
>
> > On 30 mai, 05:53, "Jeremiah Elliott" wrote:
> >> I am trying to get google visualizations working in my gwt app (gwt 1.5.0) .
>
> >> I added this to my html:
> >> <script type="text/javascript" src="http://www.google.com/jsapi"></script>
>
> >> I have this method in my gwt code:
>
> >> public static native void getVisual() /*-{
> >> google.load("visualization", "1", {packages:["piechart"]});
>
> > $wnd.google.load(...
>
> > because the jsapi script is loaded in your HTML page, not in the
> > iframe that actually runs the GWT compiled script.
>
> >> function drawChart() {

> >> var data = new $w...@google.visualization::DataTable();

[Peter Blazejewicz]

hi,

Iv'e written ajax api loader which solves issues with google apis but
haven't released it yet:
http://groups.google.com/group/Google-Web-Toolkit/browse_thread/thread/eba4ad4becbe2f52/c59fc867867cf2ef?lnk=gst&q=visualization#c59fc867867cf2ef

very quick and working solution for testing js apis with GWT JSNI is
as follows (taking your exampel with Google Visualization api):

<html>
<head>
<title>Wrapper HTML for GVis</title>
<meta name='gwt:module' content='client.GVis'/>

<script type="text/javascript" src="http://www.google.com/jsapi"></
script>

<script type="text/javascript">

google.load("visualization", "1", {packages:["piechart"]});

</script>
<script language="javascript" src="client.GVis.nocache.js"></script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>

(note: Google api is loaded before gwt module, so you can skip
initialization/callback routine)

GWT/Java:

public class GVis implements EntryPoint {

public void onModuleLoad() {
getVisual();
}

native void getVisual()
/*-{
if(!$wnd.google && !wnd.google.visualisation){
return;

}
var data = new $wnd.google.visualization.DataTable();

data.addColumn('string', 'Task');
data.addColumn('number', 'Hours per Day');
data.addRows(5);
data.setValue(0, 0, 'Work');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Eat');
data.setValue(1, 1, 2);
data.setValue(2, 0, 'Commute');
data.setValue(2, 1, 2);
data.setValue(3, 0, 'Watch TV');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Sleep');
data.setValue(4, 1, 7);
var chart = new

$wnd.google.visualization.PieChart($doc.getElementById('chart_div'));

chart.draw(data, {width: 400, height: 240, is3D: true, title: 'My
Daily Activities'});
}-*/;
}

note: $wnd and also $doc (in place of "document"),

regards,
Peter

On May 30, 5:53 am, "Jeremiah Elliott" <jeremi...@gmail.com> wrote:
> I am trying to get google visualizations working in my gwt app (gwt 1.5.0) .
>
> I added this to my html:
> <script type="text/javascript" src="http://www.google.com/jsapi"></script>
>
> I have this method in my gwt code:
>
>         public static native void getVisual() /*-{
>         google.load("visualization", "1", {packages:["piechart"]});
>              function drawChart() {

>                var data = new $w...@google.visualization::DataTable();

>                data.addColumn('string', 'Task');
>                data.addColumn('number', 'Hours per Day');
>                data.addRows(5);
>                data.setValue(0, 0, 'Work');
>                data.setValue(0, 1, 11);
>                data.setValue(1, 0, 'Eat');
>                data.setValue(1, 1, 2);
>                data.setValue(2, 0, 'Commute');
>                data.setValue(2, 1, 2);
>                data.setValue(3, 0, 'Watch TV');
>                data.setValue(3, 1, 2);
>                data.setValue(4, 0, 'Sleep');
>                data.setValue(4, 1, 7);
>
>                var chart = new
> google.visualization.PieChart(document.getElementById('chart_div'));
>                chart.draw(data, {width: 400, height: 240, is3D: true, title:
> 'My Daily Activities'});
>              }
>         }-*/;
>
> Whenever i compile, however, i get this error:
> Line 369:  Unresolvable native reference to type 'google.visualization'

> Line 369 is:       var data = new $w...@google.visualization::DataTable();

>
> I am not a javascript developer, and as such have never used jsni
> before. The two resources that I have been referencing are:http://code.google.com/apis/visualization/documentation

> andhttp://code.google.com/webtoolkit/documentation/com.google.gwt.doc.De...
>
> Thanks -
> Jeremiah

[Jeremiah Elliott]

you are my hero - worked like a charm.

[Jeremiah Elliott]

ok, i hope this is the last question ;-)

I am currently adding the visualizations using:

var chart = new
$wnd.google.visualization.PieChart($doc.getElementById('chart_div'));

However, I want to add them to a gwt widget container, i.e, have a
HorizontalPanel that I could add these Visualizations objects to.
How would i do that? Is there a correlation between the DOM elements
and the GWT widgets?

Thanks
-Jeremiah

[Peter Blazejewicz]

hi,

these are trivias:

native void getVisual(Element elem)
/*-{
......
$wnd.google.visualization.PieChart(elem);
}-*/;

where element is:

Element elem = yourWidget.getElement();
getVisual(elem);

Element is javscript object and it is opaque: you can pass it bewteen
java/javascript code in gwt,

regards,
Peter

On Jun 3, 10:16 pm, "Jeremiah Elliott" <jeremi...@gmail.com> wrote:
> ok, i hope this is the last question ;-)
>
> I am currently adding the visualizations using:
> var chart = new
> $wnd.google.visualization.PieChart($doc.getElementById('chart_div'));
>
> However, I want to add them to a gwt widget container, i.e, have a
> HorizontalPanel that I could add these Visualizations objects to.
> How would i do that? Is there a correlation between the DOM elements
> and the GWT widgets?
>
> Thanks
> -Jeremiah
>

> On Mon, Jun 2, 2008 at 4:50 PM, Jeremiah Elliott <jeremi...@gmail.com> wrote:
> > you are my hero - worked like a charm.
>
> > On Mon, Jun 2, 2008 at 3:58 PM, Peter Blazejewicz
> > <peter.blazejew...@gmail.com> wrote:
>
> >> hi,
>
> >> Iv'e written ajax api loader which solves issues with google apis but
> >> haven't released it yet:

> >>http://groups.google.com/group/Google-Web-Toolkit/browse_thread/threa...