title: Making Google Visualization - Annotation Chart to work in GWT
body: <p>I am using the newly released <a href="https://developers.google.com/chart/interactive/docs/gallery/annotationchart" rel="nofollow">Annotation Chart</a> 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? </p>
  
  <p>Here's the code I am using:</p>
  
  <pre><code>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);
        }
  }-*/;
  </code></pre>
  
  <p>and I am loading the library in the HTML file:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;!-- The DOCTYPE declaration above will set the     --&gt;
  &lt;!-- browser's rendering engine into                --&gt;
  &lt;!-- "Standards Mode". Replacing this declaration   --&gt;
  &lt;!-- with a "Quirks Mode" doctype is not supported. --&gt;
  
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"&gt;
  
      &lt;!--                                                               --&gt;
      &lt;!-- Consider inlining CSS to reduce the number of requested files --&gt;
      &lt;!--                                                               --&gt;
      &lt;link type="text/css" rel="stylesheet" href="GUI.css"&gt;
  
      &lt;!--                                           --&gt;
      &lt;!-- Any title is fine                         --&gt;
      &lt;!--                                           --&gt;
      &lt;title&gt;Analytics&lt;/title&gt;
  
      &lt;!--                                           --&gt;
      &lt;!-- This script loads your compiled module.   --&gt;
      &lt;!-- If you add any GWT meta tags, they must   --&gt;
      &lt;!-- be added before this line.                --&gt;
      &lt;!--                                           --&gt;
      &lt;script type="text/javascript" language="javascript" src="gui/gui.nocache.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"  src="http://www.google.com/jsapi"&gt;&lt;/script&gt;     
      &lt;script type="text/javascript"&gt;
          google.load("visualization", "1.1", {'packages' : ["annotationchart"] });
      &lt;/script&gt;
  
    &lt;/head&gt;
  
    &lt;!--                                           --&gt;
    &lt;!-- The body can have arbitrary html, or      --&gt;
    &lt;!-- you can leave the body empty if you want  --&gt;
    &lt;!-- to create a completely dynamic UI.        --&gt;
    &lt;!--                                           --&gt;
    &lt;body&gt;
  
      &lt;!-- OPTIONAL: include this if you want history support --&gt;
      &lt;iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"&gt;&lt;/iframe&gt;
  
      &lt;!-- RECOMMENDED if your web app will not function without JavaScript enabled --&gt;
      &lt;noscript&gt;
        &lt;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"&gt;
          Your web browser must have JavaScript enabled
          in order for this application to display correctly.
        &lt;/div&gt;
      &lt;/noscript&gt;
  
      &lt;div id="chart_div" style="width: 900px; height: 500px;"&gt;&lt;/div&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>