Welcome to Geeklog, Anonymous Saturday, November 23 2024 @ 05:26 am EST
Geeklog Forums
Loading Google Chart API javascript?
Status: offline
n4th4n
Forum User
Chatty
Registered: 07/21/03
Posts: 49
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.
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:
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.
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.
17
10
Quote
Status: offline
Laugh
Site Admin
Admin
Registered: 09/27/05
Posts: 1470
Location:Canada
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:
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.
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.
19
16
Quote
All times are EST. The time is now 05:26 am.
- 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