After your service sent response and you added it using $("#statisticsContent").html(data.d.ViewHtml);
browser interprets html and starts loading and executing scripts in parallel. How do I know it? Just experience - in my projects every time I was trying to inject <script src='...'>
browsers were not waiting for scripts to load and next script
tags with custom code were executed immediately.
This is your case and you need to wait for jsapi
to load and only then execute code that will load package and perform chart rendering. Here is the code:
<div id="chart_div"></div>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
waitForGoogleApiAndLoadPackages();
function waitForGoogleApiAndLoadPackages() {
if (typeof (google) === 'undefined')
setTimeout(waitForGoogleApiAndLoadPackages, 100);
else {
google.load('visualization', '1.0', { 'callback': 'renderChart', 'packages': ['corechart'] });
}
}
function renderChart() {
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]]);
var options = { 'title': 'How Much Pizza I Ate Last Night', 'width': 400, 'height': 300 };
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Another interesting part is else
block in waitForGoogleApiAndLoadPackages
function. This is a workaround for issue described in Why does google.load cause my page to go blank? question.
Quote from Why does google.load cause my page to go blank?:
Looks like google.load is adding the script to the page using a document.write(), which if used after the page loads, wipes out the html.