Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Gary Stewart
Gary Stewart
14,142 Points
Posted by Gary Stewart
Gary Stewart
14,142 Points

Is this ok to implement Google Charts into Wordpress?

I am currently developing a Wordpress theme which features a single.php script for single posts, I would like for varying Graphs to be shown on various pages with Google Scripts.

From their site I found the following example:

https://google-developers.appspot.com/chart/interactive/docs/quick_start

 <html>

<head> <!--Load the AJAX API--> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">

  // 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([
      ['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>

</head>

<body> <!--Div that will hold the pie chart--> <div id="chart_div"></div> </body> </html> This is fine, I added the code within the <head> to my header.php and then called it within the single.php called the <div id="chart_div"></div>. My issue however is that the data is set within the head file which I need to be dynamic between various pages so I cannot simply add it to the header.php file.

I am wondering whether it is sensible to place the entire script within the single.php file (which works the same way from my tests), or whether there is a better way of handling it?

Thanks!