Solved

Google Charts

Posted on 2014-03-13
5
346 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 110

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

MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to use string functions to get particular string 3 49
Change Wording in Wordpress Plugin 4 33
display data from multiple ajax calls 9 35
bootstrap collapse 2 15
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…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

736 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