Question

我有一个Y轴数组，我希望在图形中显示它们...并希望每秒后重新加载该图形... 我使用AJAX获取此图并在主页中显示...

图表代码如下..

    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();
}

谢谢朋友们

Answer 1

在这里您可以看到工作示例。很好的解决方案 http://www.wattnotions.com/making-updating-graph-using-javascript-jpgraph/

主要思想是“Rizwan Shamsher Kaim Khani”和官方文件的总结 http://jpgraph.net/download/manuals/chunkhtml/ch05s05.html

如果您非常简化代码，您可以在HTML中获得非常简短的js代码。 php文件保持不变。

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

要实时查看刷新尝试，请将其添加到index.php * /

中

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

Answer 2

默认情况下，我认为图表无法刷新，但您需要刷新图表所在的区域。

首先您需要创建一个写入图形代码的文件。

假设您创建了一个文件，即 graph.php

<?php // content="text/plain; charset=utf-8"

function Graph1() {

require_once ('jpgraph/src/jpgraph.php');
require_once ('jpgraph/src/jpgraph_line.php');

$datay = array(0,25,12,47,27,27,0);

// Setup the graph
$graph = new Graph(350,250);
$graph->SetScale("intlin",0,$aYMax=50);

$theme_class= new UniversalTheme;
$graph->SetTheme($theme_class);

$graph->SetMargin(40,40,50,40);

$graph->title->Set('Inverted Y-axis');
$graph->SetBox(false);
$graph->yaxis->HideLine(false);
$graph->yaxis->HideTicks(false,false);

// For background to be gradient, setfill is needed first.
$graph->ygrid->SetFill(true,'#FFFFFF@0.5','#FFFFFF@0.5');
$graph->SetBackgroundGradient('#FFFFFF', '#00FF7F', GRAD_HOR, BGRAD_PLOT);

$graph->xaxis->SetTickLabels(array('G','F','E','D','C','B','A'));
$graph->xaxis->SetLabelMargin(20);
$graph->yaxis->SetLabelMargin(20);

$graph->SetAxisStyle(AXSTYLE_BOXOUT);
$graph->img->SetAngle(180); 

// Create the line
$p1 = new LinePlot($datay);
$graph->Add($p1);

$p1->SetFillGradient('#FFFFFF','#F0F8FF');
$p1->SetColor('#aadddd');

// Output line
$graph->Stroke();

}

echo Graph1();

?>

现在您想要刷新图表，所以您可以通过以下代码来完成。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
    $(document).ready(function() {
        setInterval(function() {
            $('.details').html('<img src="graph.php" />');
        }, 1000);
    });
</script>
</head>
<body>
    <div class="details">Graph Value</div> <!-- Position where you display your JPgraph !>
</body>
</html>

希望它会对你有所帮助。

由于

如何在JPGRAPH中1秒后设置自动刷新

2 个答案: