vendredi 13 janvier 2017

load google charts in ember-cli project

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