asked on

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">
JobProfit();
</script>
<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>-->

<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>
</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>
    <div class="job_tab_container" id="job_tab_container"><?php echo $show_address->loadTransactions($job_id); ?></div>
</div>
</div>

Open in new window

The Actual Function thats renders

function JobProfitChart() {
         var jobId = document.getElementById('JobId').value;
         connect_ajax();
	 xmlhttp.onreadystatechange = function() {
		if (xmlhttp.readyState===4 && xmlhttp.status===200) {
			var data = JSON.parse(xmlhttp.responseText);
                        console.log(data);
                        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 ];
                                c.push(row);
                        }
			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");
	 xmlhttp.send(values);
}

Open in new window

The call to google and placement

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

Open in new window

Amar Bardoliwala

Hello Easyrider43,

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

Thank you.

Amar Bardoliwala

Pierre Cornelius

Do you have the AJAX API loaded?
e.g.

<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 Paseur

Did this work before and has started to fail (recently)?

ASKER CERTIFIED SOLUTION

Easyrider43

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Easyrider43

ASKER

good old google