?
Solved

Google Charts

Posted on 2014-03-13
5
Medium Priority
?
350 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 111

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Build an array called $myWeek which will hold the array elements Today, Yesterday and then builds up the rest of the week by the name of the day going back 1 week.   (CODE) (CODE) Then you just need to pass your date to the function. If i…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses
Course of the Month13 days, 8 hours left to enroll

750 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