current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.

Join them; it only takes a minute:

Sign up
Join the Stack Overflow community to:
  1. Ask programming questions
  2. Answer and help your peers
  3. Get recognized for your expertise
up vote 1 down vote favorite

I have been doing searches for hours upon hours and have tried different snippets of codes and techniques and I simply cannot get any of them to work. I have done research, I am simply a very inexperienced developer trying to learn as I go.

My ultimate goal: Have a live-updating graph of test results data pulled from a MySQL database and rendered using Chart.JS library.

What I have done so far:

  1. I have an HTML file with embedded JavaScript and calls to AJAX function to auto-refresh page every 5 minutes (this has been tested and works).
  2. I have a PHP file which opens a PDO connection to a local MySQL database, runs 3 selection queries, and stores the results into 3 PHP arrays. (I have iterated through the arrays and echoed the results and the data is good).
  3. I have then stored the data inside these PHP arrays into a JSON object using json_encode() e.g. $totalTestsPassedArray = array(); $sql = "SELECT totalTestsPassed FROM execution ORDER BY lastDate"; $query = $conn->prepare($sql); $query->execute(array(':totalTestsPassed' => $totalTestsPassed)); while($row = $query->fetch()){ array_push($totalTestsPassedArray, $row['totalTestsPassed']); } $json_totalTestsPassedArray = json_encode($totalTestsPassedArray); //pack data into JSON object echo $json_totalTestsPassedArray; // for accessibility by AJAX foreach ($totalTestsPassedArray as $item){ //print out contents of array echo $item . '<br>'; }

I read that one method to consume this JSON data is to use jQuery's $.getJSON method, and in order to use it, I must 'echo' out the results of my json_encoded object. I realize I am printing the results twice. The echo $json_totalTestsPassedArray is for the aforementioned purpose.

  1. I have included the path of this PHP file in my HTML file from #1 using <?php require '../file_name.php';?>
  2. I have tried several ways of unpacking this JSON encoded object packed with my database data: using AJAX requests, making a new array in the HTML and then flooding it with the JSON object using $.getJSON, and some other things people have suggested to do on various documents online, all met with failure.

Could someone please tell me the proper way to do what I am trying to do? I have a PHP file with an array of data, and I would like to pass that array of data into a dataset for use by Chart.JS to populate a graph and then draw it to the canvas and display my results.

var data = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
            {
                fillColor : "rgba(220,220,220,0.5)",
                strokeColor : "rgba(220,220,220,0.8)",
                highlightFill: "rgba(220,220,220,0.75)",
                highlightStroke: "rgba(220,220,220,1)",
                data : [DATA FROM MY PHP ARRAY IN ANOTHER FILE WOULD GO HERE...]
            }

Again, please forgive my ignorance. I have tried my best to figure out the solution on my own and would really appreciate some guidance. It's my first time using these tools. I thought it would be as simple as:

  • Query DB using PHP script
  • Store results into array
  • Pack into JSON object (the goal being to transfer data from PHP to JS file)
  • Unpack JSON object in JavaScript
  • Load unpacked data into my JavaScript array
share|improve this question
1  
I think you're not far from the solution, just consider two things: 1. an ajax and an $.getJSON expect to receive only ONE json-object. 2. $.getJSON does not do much more than the ajax, but receives json only (were as ajax can consume basicly everything like xml, html,..) – Jeff Jul 29 '15 at 0:32
1  
so please get rid of the foreach and post any errors you get (in your console (F12))! – Jeff Jul 29 '15 at 0:34
1  
When you call your script, be sure that you ONLY have a json displayed, else it's no longer json and javascript won't understand it ;-) So no debug message, nothing, just json! – Vico Jul 29 '15 at 0:35
    
@Jeff, I get no errors on the console when I remove the foreach, I get the json encoded object containing the values I would expect ["99","66","65","65","65","60",null,null,"40",etc....] So if $.getJSON only expects one JSON object, but I want to fetch the contents of 3 php arrays in my JS file to populate my graph, is there another method I should be using? And what is the proper way, in my html, to receive that data from my php file? – user2970415 Jul 29 '15 at 19:38
    
if you want to receive 3 different jsons from 3 different php-scripts you will need to have 3 different ajax calls. Or you make your php include all 3 data-sets in one json like ` {"set1": [{obj1}, {obj2}. ...], "set2": {"something different":1}, "set3": [ ..any other array..] } ` – Jeff Jul 29 '15 at 21:47
up vote 0 down vote

In php print only json and set header content type to application/json then your XHR response will contain javascript object with your data. There is no need for any json parsing.

share|improve this answer
    
So I removed all my other echo statements except for the one printing the json_encoded object, and set the content-type to be application/json. Running the script now only displays the json object containing the data that I want, but what would be the next step to consume that data in my html file? – user2970415 Jul 29 '15 at 19:50
    
in your ajax, you get that json as response in the callback .then(response) {...}. inside that you can consume it like that: var myData = JSON.parse(response); – Jeff Jul 29 '15 at 21:50

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.