use visualization api of google in GWT

Question

I want to use the Visualization javascript API from Google in my GWT project. I am using the JSNI methods but it didn't work :

private native void drawChart() /*-{

  drawChart = function() {

    // Create the data table.
    var data = new $wnd.google.visualization.DataTable();
    $wnd.data.addColumn('string', 'Topping');
    $wnd.data.addColumn('number', 'Slices');
    $wnd.data.addRows([
      ['Mushrooms', 3],
      ['Onions', 1],
      ['Olives', 1],
      ['Zucchini', 1],
      ['Pepperoni', 2]
    ]);

    // Set chart options
    var options = {'title':'How Much Pizza I Ate Last Night',
                   'width':400,
                   'height':300};

    // Instantiate and draw our chart, passing in some options.
    var chart = new $wnd.google.visualization.PieChart($doc.getElementById('chart_div'));
    $wnd.chart.draw(data, options);
  }
  $wnd.google.load('visualization', '1.0', {'packages':['corechart']});
  $wnd.google.setOnLoadCallback(drawChart);
}-*/;

I know that there's a GWT wrapper for this API but the javascript Visualisation API contains more Chart types and more features; for example I want to use ChartEditor in my GWT Project : like here

Does anyone have an example or an idea to make it work ?

and `google.load('visualization', '1.0', {'packages':['corechart']});` ? — enrybo, Jan 29 '13 at 16:27
Yes or in your JSNI method. It might be better in the JSNI method if you use the OnLoadCallback as shown in my answer. — enrybo, Jan 29 '13 at 16:33
Did you ever get this working? I have almost the exact same setup as you and it's still not letting me reference the google object in my javascript code. — Zip184, Sep 03 '13 at 14:36
I used ScriptInjector for loading the js file. But, how do I invoke google.setOnLoadCallback(drawChart); method for making chart ready to use. I am using scriptinjector in widget constructor and it loads the file. — Bennet, Feb 23 '14 at 06:25

score 0 · Answer 1 · answered Jan 29 '13 at 16:32

0

Make sure you have

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

in your HTML and

google.load('visualization', '1.0', {'packages':['corechart']});

somewhere to actually load the api.

Also don't try to use the API before it's loaded. Use this callback:

// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);

answered Jan 29 '13 at 16:32

enrybo

1,787
1
12
20

as you see in the code that i post i did what you said, but that didn't work for me – user2021357 Jan 29 '13 at 16:39
yeah sorry I missed that. The only other thing I can think of right now is that maybe the chart_div isn't in your HTML – enrybo Jan 29 '13 at 16:41
i added this tag to my HTML file :
but didn't work too – user2021357 Jan 29 '13 at 16:44
You may not want to give it a width and height, but I'm not sure that makes a difference. – enrybo Jan 29 '13 at 16:45
i actually want to put the Chart in a window(or a GWT Widget) but i didn't find out how to do it – user2021357 Jan 29 '13 at 16:51
One solution is to use an HTMLPanel and put your div in there as HTML. – enrybo Jan 29 '13 at 16:56
i see that the window put the place for the tag div (presence of scroll) but the chart didn't appear i think the javascript code is missing something – user2021357 Jan 29 '13 at 17:12
Sorry I'm not too sure anymore. You can try to check if the JS code is running. Put some `alert()` in there to quickly see if the code is running. – enrybo Jan 29 '13 at 18:14
how to call google.setOnLoadCallback(drawChart); in jsni. I mean the call back. – Bennet Feb 23 '14 at 06:03

use visualization api of google in GWT

1 Answers1