Google Visualization/Charts in Chrome - Plugin Required?

Question

We are building a new interface with AngularJS and at least one of the modules will have charts. So far I have been trying out Google Charts and it works good for me both on the local NodeJS server (through WebStorm) and on our Continuous Development Server, but for everybody else in the team, the charts are not showing up on any of them.

Pie chart

// 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([
    ['Pears', 10.5],
    ['Apples', 16.5],
    ['Bananas', 5]
]);

// Set chart options
var options = {'title':'Fruits',
    'width':420,
    'height':300};

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_1'));
chart.draw(data, options);
}

As you can see in the code, I already have the google.setOnLoadCallback(drawchart); as suggested in Google Visualization chart not showing up thanks to CSS.

I have tried to download Google's JSAPI and other stuff and include it in the project but no difference for the others.

All of us are using Google Chrome. I am logged in with my gmail and I think the others are as well. So it must be something that I have in my Google Chrome browser that they don't have.

Any idea what this could be?

EDIT

Here's my JSFiddle which has the exact solution but I have changed some content, like variables and data due to integrity...

I don't see anything in that code that would be problematic. Is there a public-facing version of your dev site that I could access to test it? If not, could you post a full HTML example that works for you but fails for your coworkers? — asgallant
Added a JSFiddle at the bottom... I am not sure if they can see the charts in the JSFiddle or not. All of them are currently on vacation, but can test this next week (July 29 2013). — Pixic
If that is the way your code is structured in your project, I don't see any reason why it wouldn't work for your coworkers. To the best of my knowledge, there isn't a conflict between angular and the Google Visualization API that could be causing them issues. I would suggest following George's advice below and error checking on your colleagues PC's to see if any error messages are cropping up in the Chrome developer's console. — asgallant
Will do that next week when at least one from the team is back. I also thought about the SVG. I will check in the Developer Tools if the even have the SVG tags if it returned empty for some reason. — Pixic

George Madrid George Madrid · Accepted Answer · 2013-07-22T14:09:56

I copy-pasted your code into a file and it loads and displays fine for me, so it's hard to say what could be going wrong. I can make a couple of suggestions to help you debug it.

1) Try putting your code on its own into a file and loading that. It the behavior is different then it's something in your setup.

2) Try opening it in an "incognito" window. This will eliminate most Chrome Extensions that might be breaking things.

3) Open the console when you load the page and see if there are any helpful error messages.

4) Open the "Network" panel when you load the page and see if there any any helpful error messages.

Google Visualization/Charts in Chrome - Plugin Required?

EDIT

2 Answers