I tried to load google chart example in the handlebar template as follows
<!--Load the AJAX API-->
<script type="text/javascript" src="http://ift.tt/1JDUibz"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.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>
<br>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
in the console, i got following error,
VM15593:4 Uncaught ReferenceError: google is not defined
at <anonymous>:4:7
at TreeConstruction.insertBefore (ember.debug.js:50096)
at ElementStack.appendText (ember.debug.js:44985)
at TextOpcode.evaluate (ember.debug.js:47601)
at VM.execute (ember.debug.js:53440)
at Object.render (ember.debug.js:53014)
at RootState.render (ember.debug.js:11335)
at runInTransaction (ember.debug.js:22298)
at InteractiveRenderer._renderRoots (ember.debug.js:11600)
at InteractiveRenderer._renderRootsTransaction (ember.debug.js:11638)
what should be done to avoid this error?
is there any different method to load google charts in ember-cli projects inside template files.
Aucun commentaire:
Enregistrer un commentaire