8

I would like to include the charts of Google Visualization API in my Java EE application. However, whatever I do, the application does not recognize the API. I have used it like this before, so I do not understand what I am doing wrong. Could someone look at my code and tell me what I am doing wrong? Thanks!

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>    
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<link type="text/css" href="LOCATION/STYLENAME.css" rel="stylesheet"/>

<script src="/tis/javascript/common/jquery.inlinemenu.js" type="text/javascript"></script>

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

      // Load the Visualization API and the piechart package.
      google.load('visualization', '1.0', {'packages':['corechart']});

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

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        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 google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>

<!--Div that will hold the pie chart-->
    <div id="chart_div"></div>

The errors are the following:

  1. ReferenceError: google is not defined
  2. The method 'setOnLoadCallback' is underlined and says: Unresolved function or method 'setOnLadCallback'
Arjan Tijms
  • 37,782
  • 12
  • 108
  • 140
John Hendrik
  • 661
  • 1
  • 7
  • 20
  • Can you show the source of the generated version (what the browser get) ? – Aviram Segal Nov 29 '12 at 10:38
  • Works in jsfiddle: http://jsfiddle.net/r9hGH/ – BeRecursive Nov 29 '12 at 10:41
  • The browser shows no output, it breaks on the ReferenceError... In a stand-alone page it indeed works. Quite a mystery – John Hendrik Nov 29 '12 at 10:53
  • @JohnHendrik did you ever figure this out? – Wyetro Jul 06 '15 at 15:52
  • Have you tried loading the packages like this? – danabnormal Jul 06 '15 at 16:08
  • @danabnormal, it didn't fix it – Wyetro Jul 06 '15 at 16:31
  • @WMios Can you check through developer tools in chrome or firebug in firefox if the script files are being loaded properly when you load it through your web-application? Also please check if any other JS file is conflicting with the `google` instance. And would also be good if you can provide the server information in which you are running the app and also if there are any server configurations. Thanks. – Prakash K Jul 08 '15 at 09:59
  • @PrakashK, the answer is here: http://stackoverflow.com/questions/31251147/google-charts-not-loading-on-intellij – Wyetro Jul 08 '15 at 13:14

2 Answers2

2

Why don't you try to disable all the addons in your browser specially an addon called "Disconnect".I ran into the same issue and after removing the addon it worked quite well. Some addon probably interfere in the google API libraries.

Abhinav Pandey
  • 270
  • 8
  • 21
1

Try modifying this line of code:

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

To this:

google.load('visualization', '1', {packages: ['corechart'], callback : drawChart});
Wyetro
  • 8,439
  • 9
  • 46
  • 64