• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 352
  • Last Modified:

Google Charts

Hey Experts --

I cant get my Google chart to load, when the page loads its almost like it doesn't execute the function that i call, it doesn't give me an error and nothing shows up on the screen. maybe another set of eyes can see what im missing or have inncorrect.

This is the Template it will load in
<script type="text/javascript">
<body onload="showJobtrait(<?php echo $job_id; ?>, 'trans'); Projectpie(<?php echo $job_id; ?>);">
<input type="hidden" value="<?php echo $job_id; ?>" id="JobId">
<div class="job_manage_container" id="job_manage_container">
		<?php $show_address->project_description($job_id, FALSE); 	?>
                <div class="JobStatusGraph" id="JobScopeStatusGraph"></div>
<!--        <div class="scopePermitNumber">Permit Num: </div><div class="scopePermitNumber2"><?php $show_address->endterOrDisplayPermitNum($job_id); ?></div>
        <div class="scopeUtilityName"></div>-->
	<!--	<div class="statusPosition">
        <?php $show_address->updateScopeStatus($job_id); ?>

<div class="job_manage_funding_container" id="job_manage_funding_container">
	<div class="total_expenses">Total Expenses: $<?php echo $get_stats->collectTransactions($job_id); ?></div>
	<div class="total_hours"   >Total Hours:     <?php echo $get_stats->collectTotalHrs($job_id);     ?></div>
        <div class="total_taxs"    >Total Pay Role: $<?php echo $get_stats->TotalPayPerJob($job_id);     ?></div>
	<div class="estimate_amt"  >Amount Billed:  $<?php echo $get_stats->ProjectBillingAmt($job_id);   ?></div>
        <div class="profit_loss"   >Profit/Loss:    $<?php echo '0.00';  ?></div>
        <?php $show_address->project_team($job_id); ?>
<div class="job_filing_folders" id="job_filing_folders">
    <div class="job_filing_tabs_container">
	<div class="job_tab1" id="transactions" onclick="showJobtrait(<?php echo $job_id; ?>, 'trans');"><h2>Transactions</h2></div>
	<div class="job_tab3" id="notes"        onclick="showJobtrait(<?php echo $job_id; ?>, 'notes');"><h2>Notes</h2></div>
        <div class="job_tab4" id="CompNotes"    onclick="showJobtrait(<?php echo $job_id; ?>, 'MainJobNotes');"><h2>Company Notes</h2></div>
        <div class="job_tab5" id="ScopePhotos"  onclick="showJobtrait(<?php echo $job_id; ?>, 'photos');"><h2>Scope Photos</h2></div>
    <div class="job_tab_container" id="job_tab_container"><?php echo $show_address->loadTransactions($job_id); ?></div>

Open in new window

The Actual Function thats renders

function JobProfitChart() {
         var jobId = document.getElementById('JobId').value;
	 xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState===4 && xmlhttp.status===200) {
			var data = JSON.parse(xmlhttp.responseText);
                        var c = [["Expenses", "Pay Role", "Total Billed"]];
                        for (var j=0; j < data.length; j++) {
                             var row = [ data[j].expenses, data[j].payrole, data[j].billed ];
			var data2 = new google.visualization.arrayToDataTable(c);
                        var options2 = {
                            width:  400,
                            height: 295,
                            title:  'Scope Overview',
                            colors: ['#e0440e', '#e6693e', '#ec8f6e', '#f3b49f', '#f6c7b6'],
                            is3D:   true
                 var piec = new google.visualization.PieChart(document.getElementById('JobScopeStatusGraph'));
                     piec.draw(data2, options2);
    var  file    = "http://" + u + "/members/stats";
    var  values  = "view=JobFinanicalStatus&job=" + jobId + "&id=" + Math.floor((Math.random()*100)+1);
	 xmlhttp.open("POST", file, true);
	 xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Open in new window

The call to google and placement

function JobProfit() {
   google.load('visualization', '1', {'packages':['corechart']});

Open in new window

1 Solution
Amar BardoliwalaCommented:
Hello Easyrider43,

try calling your function on pageload event and see if that works for you.

Thank you.

Amar Bardoliwala
Pierre CorneliusCommented:
Do you have the AJAX API loaded?
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

You can specify a callback funciton to execute after the package loads.

try this:
function JobProfit() {
   google.load('visualization', '1', {'packages':['corechart'], 'callback':JobProfitChart});

Open in new window

Ray PaseurCommented:
Did this work before and has started to fail (recently)?
Easyrider43Author Commented:
I ended up resolving the issue by extracting the data all in one query and calling both the chart function in one function, apprently you cant make 2 calls to google to have different charts it needs to be all in one function
Easyrider43Author Commented:
good old google
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now