Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jave EE application does not recognize Google Visualization API

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'
like image 422
John Hendrik Avatar asked Nov 29 '12 10:11

John Hendrik


2 Answers

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.

like image 71
Abhinav Pandey Avatar answered Oct 16 '22 15:10

Abhinav Pandey


Try modifying this line of code:

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

To this:

google.load('visualization', '1', {packages: ['corechart'], callback : drawChart});
like image 33
Wyetro Avatar answered Oct 16 '22 15:10

Wyetro