Hi all,
First I'd like the thank your team at Google for the outstanding guidance
in helping this no coding experience, blundering fool at times, That said,
I recall a few people having issues with page load times as I had, and
wanted to give back with this little tip for people like me, or even pro's
like most of you that can make it better.
I read a lot about using only a single callback as a solution, but could
never actually get that to work, for the dozens of charts that appear on
multiple pages throughout my website. My problem had been that I was
loading all of charts, that I placed on multiple pages within my *wordpress*
site, on every page whether needed or not.. Because the scripts are in the
header, all of the scripts would run on every loaded page, every time.,
even on reload......Doing this ten times for every loaded page even when no
charts appear on a page being rendered, is a catastrophic waste of time and
resources, and increases load times to the point of server timeouts and 500
errors inevitably occurring in short order
The 'problem' is solved *completely* by doing this, *Specify both the
google chart script AND the php script to run only IF needed*
on specifically requested pages, ( there might be ways others can modify
their own code and the importing of their data..... I use a *php* script,
to query a *mysql* database to obtain the data, which is converted to *JSON* by
the php script.)
Here I'm specifying the first chart scripts to load *only* on the home page:
<script type="text/javascript">
if (window.location.pathname == "/") {
<?php include("insert/your/php/data/script(s)/here.php");?>
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChartsFront);
function drawChartsFront() {
var data1=new
google.visualization.DataTable(<?=$aaplchart?>);var options1=
{legend:'bottom'};var chart1 = new
google.visualization.LineChart(document.getElementById('aapl_div'));chart1.draw(data1,options1);
var data2=new
google.visualization.DataTable(<?=$msftchart?>);var options2=
{legend:'bottom'};var chart2 = new
google.visualization.LineChart(document.getElementById('msft_div'));chart2.draw(data2,options2);
var data3=new
google.visualization.DataTable(<?=$bacchart?>);var options3=
{legend:'bottom'};var chart3 = new
google.visualization.LineChart(document.getElementById('bac_div'));chart3.draw(data3,options3);
var data4=new
google.visualization.DataTable(<?=$citichart?>);var options4=
{legend:'bottom'};var chart4 = new
google.visualization.LineChart(document.getElementById('citi_div'));chart4.draw(data4,options4);
};
};
</script>
For each subsequent page requiring data, charts, tables, etc, use this
example page URL of 'http://root_url.com/your2ndpage/' ... for each
page requiring a google chart needed for the specific page, add the
following to your google chart header script:
<script type="text/javascript">
* if (window.location.pathname == "/your2ndpage/") { *
* <?php if (is_page('your2ndpage')) { *
*
include("insert/your/php/script(s)/here.php"); *
*
include("insert/your/php/script(s)/here/if/multiple.php"); *
*
include("insert/your/php/script(s)/here/etc"); *
* }?>*
google.load("visualization", "1", {packages:["corechart","table"]});
google.setOnLoadCallback(drawChartsp2);
function drawChartsp2() {
var data5 = new google.visualization.DataTable(<?=$jsondata5?>);var
options5 = {title: 'DOW Total Short Percent'};var chart5 = new
google.visualization.LineChart(document.getElementById('chart5_div'));chart5.draw(data5,
options5);
var data6 = new google.visualization.DataTable(<?=$jsondata6?>);var
options6 = {title: 'DOW Open Short Percent'};var chart6 = new
google.visualization.LineChart(document.getElementById('chart6_div'));chart6.draw(data6,
options6);
var data7 = new google.visualization.DataTable(<?=$jsondata7?>);var
options7 = { title: 'DOW Short Percent Spread'};var chart7 = new
google.visualization.LineChart(document.getElementById('chart7_div'));chart7.draw(data7,
options7);
var data8 = new google.visualization.DataTable(<?=$jsondata8?>);var
table8 = new google.visualization.Table(document.getElementById('table8_div
'));table8.draw(data8, {showRowNumber: false});
};
* };*
</script>
The above javascript and php script will ONLY fire off *IF* a visitor goes
to 'http://root_url.com/your2ndpage/'. Wordpress pages tend to end with a
"/".
If your URL has an extension such as
'http://root_url.com/your2ndpage.html', the script addition above would
look like this:
*if (window.location.pathname == "/your2ndpage.html") { *
* <?php if (is_page('your2ndpage.html')) {*
*
include("insert/your/php/script(s)/here.php"); * *}?>*
If not specified, the php scripts can run even though the google scripts do
not, so the second php "if(is_page" function is needed also to prevent
tying up your own database. Only one call is made to the Google server, and
your own server, and no calls are made and no functions run unnecessarily
on other pages--resulting in page load times becoming nearly instant, and
despite having any number of potential pages with charts to be rendered.
Simple solution,...long winded explanation...I hope this helps someone..
Have a great day!
--
You received this message because you are subscribed to the Google Groups
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/d/optout.
