jquery: Auto-refresh highcharts

Question

How can I auto-refresh highcharts every second with data retrieved from a mysql database using PHP and javascript? This is my code. I don't know much about Javascript. I have looked into other questions and posts but I did not understand it and I have tried but it did not work for me. Is there any other way to alter my code to make it refresh automatically every second?

Are you trying to use AJAX to load data after? if not you won't have to even refresh it on every second as the php gets run first before the page get displayed to you — Suthan Bala, May 24 '13 at 17:35
I was asking whether you were updating the data using AJAX later.. At this moment, you don't have to worry about refreshing Highcharts because this page comes to existence after all the data from the MYSQL and PHP has been generated on the page, and once that is loaded, then the Highchart script starts. There should be some issue with your current code if Highchart is not working right now. — Suthan Bala, May 24 '13 at 17:47
My highchart is working at the moment. But I want it to be updated every second with new populated data from the DB. I am not using AJAX for now. — ElSS, May 24 '13 at 17:49

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

You have to use Ajax. And for god's sake separate your PHP from your Javascript/HTML stuff. Here are some tutorials you can start 0, 1, 2.

$.getJSON is an AJAX call, it is equivalent to:

$.ajax({
    dataType: "json",
    url: url,
    data: data,
    success: success
});

You just have to add the timer:

setInterval(displaygraph(), 1000);

edited May 23 '17 at 11:50

Community

1
1

answered May 24 '13 at 17:45

Frederico Schardong

1,946
6
38
62

I don't think she needs any AJAX, the data is just getting populated. She's using PHP to populate the data right on the page. – Suthan Bala May 24 '13 at 17:50
No it's not. once the page loads, php gets the data one time from the DB and populate it to the chart. I need it to update/refresh it with new data every second. – ElSS May 24 '13 at 17:52
@ElShaikhaSue the best way to achieve this is through AJAX, it might be a bit painful in the beginning but you will see that it is worth to learn it. There are other ways to achieve what you want (reload the whole page is one), but they are terrible and should be avoided. – Frederico Schardong May 24 '13 at 17:53
Can you guide me through doing this since you are expert with AJAX? – ElSS May 24 '13 at 17:55
@ElShaikhaSue, please take a look at the last tutorial I posted, it is very good for anyone who is starting with AJAX. – Frederico Schardong May 24 '13 at 17:57
Ok, I understand these tutorials. However, I need to know what are the steps for doing it? – ElSS May 24 '13 at 18:07
Start applying the ideas you learned in the tutorials to your code: first make your PHP code not return Javascript code, only the content of the variables, second put your PHP code in other file separated from the HTML/Javascript, after you have that working implement Ajax will be easy. – Frederico Schardong May 24 '13 at 18:11
Hi friend, I did all of the steps you mentioned above except for the last one. I managed to get my variables data in separate PHP file. Now, my chart is not loaded, I only get the data array. I will update my code for you for further guidance. – ElSS May 24 '13 at 18:50
Good work! Check my update, you have 99% done. Just have to add the timer function. – Frederico Schardong May 24 '13 at 19:23
Hi again, There is a timer within displaygraph() function. – ElSS May 24 '13 at 19:29
Take it out from there, after your first call to `displaygraph` it will call `displaygraph` much more than you want. – Frederico Schardong May 24 '13 at 19:32
@ElShaikhaSue any success? – Frederico Schardong May 24 '13 at 19:38
Nope, problems with calling displaygraph(). The timer is now after the displaygraph() function. I will update my code now. – ElSS May 24 '13 at 19:45
The error: Fatal error: Call to undefined function displaygraph() in C:\xampp\htdocs\PhoneClassmate_zympic\graph.php on line 80 – ElSS May 24 '13 at 19:47
wait, you have an error here `json_encode(JSONObject);`. The `JSONObject` is not an PHP variable. You are confusing PHP with JS code when populating your `JSONObject`. Access `getjson.php` in your browser and take a look in the source code, it will not be a valid JSON. – Frederico Schardong May 24 '13 at 19:49
You are right, this is the error that I get when I access getjson.php; Notice: Use of undefined constant JSONObject - assumed 'JSONObject' in C:\xampp\htdocs\PhoneClassmate_zympic\getjson.php on line 43 "JSONObject" – ElSS May 24 '13 at 19:52
Ok, I got it fixed. now getjson.php outputs the following: ["1","3","1",0]. Now I need to read it in displaygraph() function and call it the proper way. – ElSS May 24 '13 at 19:55
Sounds like a plan :) go ahead and report what you've got – Frederico Schardong May 24 '13 at 19:57
No. I don't know how to call the function. When I call it, chart doesn't show. – ElSS May 24 '13 at 20:59
As you said your PHP is ok, now you have to debug your Javascript. Use Firebug extension if you are using Firefox or the Inspector if you are using Chrome. – Frederico Schardong May 24 '13 at 21:26
After hours of trying and trying I've found an easier way to do it and it works like a charm. :) I posted the answer for my question. – ElSS May 26 '13 at 19:31

score -2 · Answer 2 · answered May 26 '13 at 19:31

-2

This is the answer. Place it in your header of HTML. It'll refresh every 1 second.

<meta http-equiv="refresh" content="1">

answered May 26 '13 at 19:31

ElSS

329
5
16

1

If you were expecting an answer like so, then you shouldn't have tagged your post with PHP, JavaScript, jQuery and JSON. One would then only expect that you want an answer relating to AJAX. Neither did you provide any code. – hexacyanide May 26 '13 at 19:36
I tried to do it with AJAX but nobody gave me a solution that works. After that I decided to do it with html meta tag. :/ – ElSS May 26 '13 at 19:38
1

Your post is too vague for someone to give an exact solution. Otherwise, the post by Frederico works for your case. – hexacyanide May 26 '13 at 19:39
It wasn't vague two days ago, I posted a huge section of my code. Now that I solved it, I removed it. I was not able to do what Frederico suggested me to do so I found a work around. – ElSS May 26 '13 at 19:41
This will refresh the *whole* page every second - is this what you want? If you only want a portion of the page to refresh (e.g. the div containing the chart), then the meta refresh isn't the right solution. I'm a beginner to highcharts, but I know how AJAX works - I think the following link may help you out (as it has for me): http://ajax101.com/highcharts-with-mysql-php/. – Rob Jan 26 '14 at 01:11

jquery: Auto-refresh highcharts

2 Answers2