Making Google Visualization - Annotation Chart to work in GWT

StackOverflow https://stackoverflow.com/questions/22183104

Question

I am using the newly released Annotation Chart in gwt by calling native javascript, and what I got until now is to have it display the example chart as it is, but the problem I am having is that it is not interactive at all. It looks more like an image. Anyone got any idea about how might I make this work properly?

Here's the code I am using:

public void onModuleLoad() {
    createChart();
}

private native void createChart() 
/*-{

    $wnd.google.setOnLoadCallback(drawChart); 
    function drawChart() {
        var data = new $wnd.google.visualization.DataTable();
        data.addColumn('date', 'Date');
        data.addColumn('number', 'Kepler-22b mission');
        data.addColumn('string', 'Kepler title');
        data.addColumn('string', 'Kepler text');
        data.addColumn('number', 'Gliese 163 mission');
        data.addColumn('string', 'Gliese title');
        data.addColumn('string', 'Gliese text');
        data.addRows([
              [new Date(2314, 2, 15), 12400, undefined, undefined,
                              10645, undefined, undefined],
              [new Date(2314, 2, 16), 24045, 'Lalibertines', 'First encounter',
                              12374, undefined, undefined],
              [new Date(2314, 2, 17), 35022, 'Lalibertines', 'They are very tall',
                              15766, 'Gallantors', 'First Encounter'],
              [new Date(2314, 2, 18), 12284, 'Lalibertines', 'Attack on our crew!',
                              34334, 'Gallantors', 'Statement of shared principles'],
              [new Date(2314, 2, 19), 8476, 'Lalibertines', 'Heavy casualties',
                              66467, 'Gallantors', 'Mysteries revealed'],
              [new Date(2314, 2, 20), 0, 'Lalibertines', 'All crew lost',
                              79463, 'Gallantors', 'Omniscience achieved']
        ]);

        var chart = new $wnd.google.visualization.AnnotationChart($wnd.document.getElementById('chart_div'));

        var options = {
          displayAnnotations: true,
        };

        chart.draw(data, options);
      }
}-*/;

and I am loading the library in the HTML file:

<!doctype html>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="GUI.css">

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Analytics</title>

    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="gui/gui.nocache.js"></script>
    <script type="text/javascript"  src="http://www.google.com/jsapi"></script>     
    <script type="text/javascript">
        google.load("visualization", "1.1", {'packages' : ["annotationchart"] });
    </script>

  </head>

  <!--                                           -->
  <!-- The body can have arbitrary html, or      -->
  <!-- you can leave the body empty if you want  -->
  <!-- to create a completely dynamic UI.        -->
  <!--                                           -->
  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>

    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

    <div id="chart_div" style="width: 900px; height: 500px;"></div>

  </body>
</html>
Was it helpful?

Solution

To answer my own question, here is the GWT wrapper that I wrote for this chart. It works and supports all the options, and can be used in the same way as you would use other google charts in GWT.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top