Googlechart Not Working In Mvc

I want to create a Google chart with data from database. I have an action which return a Json data, like this: [{'Day':1,'Value':0.07,'Target':0.82},{'Day':2,'Value':1.00,'Target

Solution 1:

There are a couple things going on here.

First, the code posted in the question is mixing versions of Google Charts.

There are two script sources that can be used...

1) https://www.google.com/jsapi

Load statements looks like this...

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

2) https://www.gstatic.com/charts/loader.js

Load statement looks like this, notice the secondary namespace charts...

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawVisualization);

The latter, loader.js, is now the preferred method.

ALSO

As demonstrated in this SO post, using setOnLoadCallback in combination with $(document).ready can also cause issues.

To avoid, the callback function can be referenced directly within the load statement.

$(document).ready(function(){
    google.charts.load('current', {
      'packages': ['corechart'],
      'callback': drawVisualization
    });
});

Solution 2:

Assuming your embedded script is executing before the external Google API is loading, try delaying execution by wrapping your script in...

$(document).ready(function() {
...
}

or, if you aren't using jQuery...

document.addEventListener("DOMContentLoaded", function(event) { 
...
});

Solution 3:

There are a Two things going on here.

There are two script sources that can be used...

1) https://www.google.com/jsapi

Load statements looks like this:

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

2) https://www.gstatic.com/charts/loader.js

Load statement looks like this, notice the secondary namespace charts...

google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawVisualization);

(loader.js), is now the preferred method.

And as demonstrated in this SO post, using setOnLoadCallback in combination with $(document).ready can also cause issues.

The callback function can be referenced directly within the load statement.

$(document).ready(function(){
    google.charts.load('current', {
      'packages': ['corechart'],
      'callback': drawVisualization
    });
});