Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Repost from PHP as instructed - ideas why js function is not executing?

Status
Not open for further replies.

BobMCT

IS-IT--Management
Sep 11, 2000
756
US
I've been struggling with this for going on a week now and tried just about just about every iteration I could find referenced on searches.
I'm trying to integrate google charts into this program to create three charts based on different data content.
There is no event other than onload that I can determine. Can someone please review and advise how/why the js functions are not triggering?
Thanks
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet">
<link href="css/animate.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
</head>
<body class="top-navigation" onload="BuildCharts()" >
<div id="wrapper">
<div id="page-wrapper" class="gray-bg">
<div class="row border-bottom gray-bg">
<?php include("nav-top.php"); ?>
</div>
<div class="wrapper wrapper-content white-bg">
<div class="container">
<div class="row">
<div class="row show-grid">
<div id="ChartArea1" class="col-xs-6 col-sm-4"></div>
<div id="ChartArea2" class="col-xs-6 col-sm-4"></div>
<div id="ChartArea3" class="col-xs-6 col-sm-4"></div>
</div>
</div>
</div>
</div>
<? require('footer-section-clean2.php'); ?>
</div>
</div>
<!-- Mainly scripts -->
<script src="js/jquery-2.1.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script src="js/jquery-ui-1.10.4.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="js/inspinia.js"></script>
<script src="js/plugins/pace/pace.min.js"></script>
<!-- Input Mask-->
<script src="js/plugins/jasny/jasny-bootstrap.min.js"></script>

<!-- Chart Components Area -->
<script src="<script>
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
// Function to generate and display Chart
function drawChart(req_dept) {
var CA = $.ajax({
url: "proc-totals-data.php?req_dept="+req_dept,
dataType: "json",
async: false
}).responseText;
var data = google.visualization.arrayToDataTable(CA);
// Define Display Options
var options = {
title: 'Procedures Performed by Month & Year\n\n',
hAxis: { title: 'by Month', titleTextStyle: {color: '#333'}},
vAxis: { title: 'Count', minValue: 0},
width: { 120, height: 60}
};
// Instantiate and draw the chart.
ChartArea = 'ChartArea'+req_dept;
var chart = new
google.visualization.LineChart(document.getElementById(ChartArea));
chart.draw(data, options);
};
</script>
<script>
function BuildCharts() {
drawChart(1);
drawChart(2);
drawChart(3);
}
</script>
</body>
</html>

I know the code is not the prettiest - but I'm just trying to get it functioning.
Any pointers greatly appreciates. Thanks cyclops
 
What kind of JS errors are you seeing in your browser's console? (F12)
 
Oops - forgot to include those. Right now its only the following:

Uncaught SyntaxError: Unexpected token :
and the returned content from the server is:
{"2015":["1":130,"2":124,"3":156,"4":173,"5":180,"6":189,"7":174,"8":137,"9":133,"10":157,"11":141,"12":145],"2016":["1":180,"2":174,"3":230,"4":228,"5":223,"6":222,"7":223,"8":197,"9":156,"10":186,"11":157,"12":182],"2017":["1":207,"2":175,"3":291,"4":254,"5":245,"6":284,"7":191,"8":201,"9":141,"10":114,"11":69,"12":39]}

I've tried so many different ways to convert this string into a javascript array.
 
Seems like you are serializing the array from PHP. Have you tried to instead use json_encode() to turn into something Javascript can read?




----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Thanks for the reply. Believe it or not the return statement reads:

return json_encode($aray_name);

I'm surprised that this json looks a little different than others I've done. Perhaps because its a multi-dimensional array???

 
I think your error has nothing to do with your JSON. It lies a bit further down in the chart options:


Code:
// Define Display Options
var options = {
title: 'Procedures Performed by Month & Year\n\n',
hAxis: { title: 'by Month', titleTextStyle: {color: '#333'}},
vAxis: { title: 'Count', minValue: 0},
[b]width: { 120, height: 60}[/b]
};

Should be:
Code:
...
[b]width:120, 
height: 60[/b]
};





----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Thanks for picking that up. Often times in the myriad of detail we miss the small stuff.
The actually issue turned out to be a strange one. Even though the encoded json string was returned from PHP
the javascript had to further stringify each character of the JSON object. Each character, in turn, was run through
toString back to itself and then the charting took it without issue.
Thanks for responding though. I'd been struggling with this for many,many days and just resolved it about an hour ago.
 
Glad to hear it worked out.

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top