ASE Home Page Products Download Purchase Support About ASE
ChartDirector General
Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  auto refresh chart using ajax
Posted by Rizki on Apr-19-2011 16:34
Attachments:
hello everyone

i'm kind of newbie in ajax and php programming :)

- i want to auto refresh the chart without refreshing the entire page
- the value of the chart was from mysql
- i'm using ajax to automaticly refresh a <div> that contain the chart in my page

the problem is the chart was repaint but the value isn't change even thought i change     the value in mysql

hope you all understand what i mean, please help me..

for further information i attach my program
isi3.html
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>ajax auto refresh div</title>

    <script type="text/javascript">
    function jin_ajax_req(url,target) {
        var http_request = false;
        if (window.XMLHttpRequest) { // Mozilla, Safari,...
            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType('text/xml');
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }
        
        if (!http_request) {
            alert('Browser not support Ajax.');
            return false;
        }
        http_request.onreadystatechange = alertInhalt;
        http_request.open('GET', url, true);
        http_request.send(null);
 
        function alertInhalt() {
            if (http_request.readyState == 4) {
                var answer = http_request.responseText;
                if(document.getElementById(target).innerHTML != answer){
                    document.getElementById(target).innerHTML = answer;
                } else {
                    document.getElementById(target).innerHTML = "";
                }
            } else {
                document.getElementById(target).innerHTML = "Loading...";
            }
        }
        // Loop time per micro second
        setTimeout("jin_ajax_loop()", 5000);
    }
    function jin_ajax_loop() {
        // url and target
        jin_ajax_req('random_text.html', 'div_test');
    }
    </script>
</head>

<body onload="jin_ajax_loop();">

<div id="div_test"></div>
</body>
</html>
random_text.html
<html>
<head>

<title>SCADA SERVER</title>
<script language="JavaScript">

var time = null
function move() {
					window.location = 'random_text.html'
				}

//-->
</script>
</head>

<body onload="timer=setTimeout('move()',1000)">
<img src="graph2.php">
</body>
</html>

  Re: auto refresh chart using ajax
Posted by Peter Kwan on Apr-20-2011 02:01
Hi Rizki,

As I cannot see your "graph2.php", I will simply assume that it will create a different chart each time it is run. You can double check by adding a random number of the current time to the chart title. In this way, if you see the chart title changing, you know the chart is being updated.

If you are absolutely sure "graph2.php" will update the chart each time it is run, the next step is to make sure you actually run it. In your current code, there is no assurance that you are running "graph2.php". For example, the browser can be loading the image from cache instead of actually sending a request to the server. To solve the problem, you may add a random number as a query parameter to the URL. See:

http://www.chartdir.com/forum/download_thread.php?bn=chartdir_general&thread=1187114391#N1187119822

In your code, I also see that you are reloading random_text.html. To check if it is really reloaded (again, the browser can potentially use cache), you may change the code to PHP, and add a random number or a timestamp to the HTML output. In this way, you can know the web page is really reloaded or not.

Hope this can help.

Regards
Peter Kwan