INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

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

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

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

(OP)
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="https://www.gstatic.com/charts/loader.js"></script>
<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

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

What kind of JS errors are you seeing in your browser's console? (F12)

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

(OP)
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.

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

Seems like you are serializing the array from PHP. Have you tried to instead use json_encode() to turn into something Javascript can read?

http://php.net/manual/en/function.json-encode.php

----------------------------------
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

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

(OP)
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???

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

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},
width: { 120, height: 60}
}; 

Should be:

CODE

...
width:120, 
height: 60
}; 



----------------------------------
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

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

(OP)
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.

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

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

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close