phpmysqljpgraph

how to set auto refresh after 1 second in JPGRAPH


I've an array for Y-axis and i want to display them in graph...and want to reload that graph after every second... i got this graph using an AJAX and display in HOME PAGE...

Chart code is as below..

    function graph1()
{
    $dt=array();    
    $q=mysql_query("select * from pricee ") or die (mysql_error());
    while($data=mysql_fetch_object($q))
    {
        array_push($dt,$data->price);
    }       
        $datay = $dt;


        for( $i=0; $i < sizeof($datay); ++$i )
        {
            $data[$i] = $datay[$i];         
        }

        // Create the new graph
        $graph = new Graph(540,300,auto);

        // Slightly larger than normal margins at the bottom to have room for
        // the x-axis labels
        $graph->SetMargin(40,40,30,130);

        // Fix the Y-scale to go between [0,100] and use date for the x-axis
        $graph->SetScale('datlin',0,max($datay));       

        // Adjust the start time for an "even" 5 minute, i.e. 5,10,15,20,25, ...
        $graph->xaxis->scale->SetTimeAlign(SECADJ_1);

        // Force labels to only be displayed every 1 second
        $graph->xaxis->scale->ticks->Set(1);

        // Use hour:minute format for the labels
        $graph->xaxis->scale->SetDateFormat('H:i:s');

        $graph->title->Set("Example on Date scale");

        // Set the angle for the labels to 90 degrees
        $graph->xaxis->SetLabelAngle(90);

        $line = new LinePlot($data,$xdata);
        $line->SetLegend('Merc Price');
        $line->SetFillColor('lightblue@0.5');
        $graph->Add($line);
        return $graph->Stroke();
}

Thank you friends


Solution

  • Here you can see working example. Pretty good solution http://www.wattnotions.com/making-updating-graph-using-javascript-jpgraph/

    The main idea is summarizing from "Rizwan Shamsher Kaim Khani" and official doc http://jpgraph.net/download/manuals/chunkhtml/ch05s05.html

    If you very simplify code, you can get very short js code into your HTML. php file remains as it is.

    <!DOCTYPE html>
    <html>
    <body>
        <script>
            function refresh() {
                setInterval(function() {
                    var image = document.getElementById('myImage');
                    image.src = "index.php?" + new Date().getTime();
                }, 1000);
            }
            refresh();
        </script>
        <img id="myImage" src="index.php"/>
    
    </body>
    </html>
    

    To see refresh tries realtime add this into your index.php */

    /* NOTE! $today variable is mandatory usage */
    $today = date("Y-m-d H:i:s");
    $graph->title->Set('Title'.'     '.$today);