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!

Register Log in
  • Congratulations TouchToneTommy 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

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
 
Sort by date Sort by votes
What kind of JS errors are you seeing in your browser's console? (F12)
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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???

 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
291
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
328
xwb
xwb
jimoo
  • Locked
  • Question
How execute JS
Replies
3
Views
406
xwb
xwb
penguinspeaks
  • Locked
  • Question
How do I pass a classic asp variable to JS
Replies
1
Views
451
xwb
xwb
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
265
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top