Solved

Google Charts

Posted on 2014-03-13
5
343 Views
Last Modified: 2014-05-15
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

0
Comment
Question by:Easyrider43
5 Comments
 
LVL 11

Expert Comment

by:Amar Bardoliwala
ID: 39928558
Hello Easyrider43,

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

Thank you.

Amar Bardoliwala
0
 
LVL 14

Expert Comment

by:Pierre Cornelius
ID: 39928671
Do you have the AJAX API loaded?
e.g.
<!--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

0
 
LVL 109

Expert Comment

by:Ray Paseur
ID: 39929069
Did this work before and has started to fail (recently)?
0
 
LVL 1

Accepted Solution

by:
Easyrider43 earned 0 total points
ID: 40056872
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
0
 
LVL 1

Author Closing Comment

by:Easyrider43
ID: 40066712
good old google
0

Featured Post

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question