Welcome to Geeklog, Anonymous Wednesday, December 07 2022 @ 10:16 pm EST

Geeklog Forums

Loading Google Chart API javascript?


Status: offline

n4th4n

Forum User
Chatty
Registered: 07/21/03
Posts: 47
Location:NY, USA
I recently upgraded one of my sites to the latest GL1.8.
What I want to do is integrate some charts using the Google Chart API:
https://developers.google.com/chart/

In the past this has worked fine because using their older tools I could just build the chart as a call to an image in html which GL had no problem allowing - all I was doing was loading an external image.

Text Formatted Code
echo '<img align="left" src="https://chart.googleapis.com/chart?';
echo 'various options and call data out of my other databases to build my graph....


This is being deprecated by Google now though, and they want you to use the new format (which has lots of cool bells and whistles). The new method is javascript-based. I have done a certain amount of reading about the $_SCRIPTS class, but I'm still not sure how I should be approaching this. Here's an example. As a test in a PHP page outside of geeklog the following works fine:

Text Formatted Code
echo "<script type='text/javascript' src='https://www.google.com/jsapi'></script>";
echo "<script type='text/javascript'>";
echo "google.load('visualization', '1', {packages:['corechart']});";
echo "google.setOnLoadCallback(drawChart);";
echo "function drawChart() {";
echo "var data = google.visualization.arrayToDataTable(["; // grab the data from above echo $result; // end getting data echo " ]);";
echo "var options = {";
echo "title: 'My Graph',";
echo "};";
echo "var chart = new google.visualization.PieChart(document.getElementById('backlog_chart_div'))";
echo "chart.draw(data, options);";
echo "}";
echo "</script>";
 


I believe I need the script to be in the header, but I really only need the script in the header on a certain static page, it seems it would be a performance hit to load it all the time. The data is dynamically generated by a call to another database I run.

What is the best way to go about loading externally hosted javascript like this in a Geeklog static page? I am not a developer, though I have been using Geeklog for a long time and have managed to hack together whatever I've needed up to this point. I'm starting to get into things over my head here with javascript so please be gentle. Smile
 Quote

Status: offline

Laugh

Site Admin
Admin
Registered: 09/27/05
Posts: 1447
You could use the scripts class but you can echo it like you are doing as long as you have "execute php" selected for the staticpage. One thing you have to do with any javascript code like this is to make sure you add a space before the } bracket and after the { bracket. This is to prevent Geeklog from seeing a template variable (which uses the same brackets) which is actually not there because it is javascript code. I updated your code for you with the spaces added:

Text Formatted Code

echo "<script type='text/javascript' src='https://www.google.com/jsapi'></script>";
 echo "<script type='text/javascript'>";
 echo "google.load('visualization', '1', { packages:['corechart'] });";
 echo "google.setOnLoadCallback(drawChart);";
 echo "function drawChart() { ";
 echo "var data = google.visualization.arrayToDataTable(["; // grab the data from above echo $result; // end getting data echo " ]);";
 echo "var options = { ";
 echo "title: 'My Graph',";
 echo " };";
 echo "var chart = new google.visualization.PieChart(document.getElementById('backlog_chart_div'));";
 echo "chart.draw(data, options);";
 echo " }";
 echo "</script>";
 

One of the Geeklog Core Developers.
 Quote

Status: offline

n4th4n

Forum User
Chatty
Registered: 07/21/03
Posts: 47
Location:NY, USA
That did the trick! I wouldn't have figured that one out on my own... ever! Thanks so very much!
 Quote

All times are EST. The time is now 10:16 pm.

  • Normal Topic
  • Sticky Topic
  • Locked Topic
  • New Post
  • Sticky Topic W/ New Post
  • Locked Topic W/ New Post
  •  View Anonymous Posts
  •  Able to post
  •  Filtered HTML Allowed
  •  Censored Content