在php页面中创建jqplot图

Im trying to learn php by doing a little project using apache server. I have a php page where I want to display a bar chart with jqplot using data i pull from a MySql query. I already have a query working giving me the data i want. The problem is i dont know how to implement this into a jqplot graph. Im guessing i need to make an ajax call but if i can avoid that i would like to. my php page code so far is here http://snipt.org/oknnl2. the javascript for the bar chart is here http://snipt.org/oknoi3.
i want the chart to render in div id=chartdiv thats on line 177. I have to visualize like 6 charts. if i can get some help on doing this one, im sure i can use the same process to build the others.

我试图通过使用apache服务器做一个小项目来学习php。我有一个php页面，我想用我从MySql查询中提取的数据来显示一个包含jqplot的条形图。我已经有一个查询提供我想要的数据。问题是，我不知道如何将其应用到jqplot图中。我想我需要打一个ajax电话，但是如果我可以避免的话，我想这样做。到目前为止，我的php页面代码是http://snipt.org/oknnl2。这个柱状图的javascript是http://snipt.org/oknoi3。我想要在第177行的div id=chartdiv中显示图表。我需要想象出6个图表。如果我能在这方面得到一些帮助，我确信我可以使用相同的过程来构建其他的。

1 个解决方案

#1

PHP cannot create the javascript plot and send it downstream to the client, but you don't have to make an actual AJAX call after the page is loaded either. Simple javascript once the page loads will suffice. If you retrieve the data you need at the PHP level, you can then make it available to javascript in the HTML received by the client. The steps to make this happen:

PHP不能创建javascript绘图并将其发送到客户端，但也不必在页面加载后进行实际的AJAX调用。一旦页面加载完成，就可以使用简单的javascript了。如果在PHP级别检索所需的数据，则可以在客户机接收的HTML中将其提供给javascript。实现这一目标的步骤如下:

First, use PHP to retrieve the data you need from the MySQL database.
首先，使用PHP从MySQL数据库检索所需的数据。
Then, output the plot data you retrieved using PHP inside a javascript code block as part of the HTML that PHP sends to the client.
然后，在javascript代码块中输出使用PHP检索的图数据，作为PHP发送给客户机的HTML的一部分。
Execute the javascript with the data seeded by PHP on page load.
使用PHP在页面加载时播种的数据执行javascript。

So, a simplified example:

所以,一个简化的例子:

<?php

// Retrieve plot data from mysql
$q = '...';
$r = mysql_query($q);

$plot_row1 = array();
$plot_row2 = array();
$plot_row3 = array();

while ($row = mysql_fetch_array($r)) {
    // append values to $plot_row1, $plot_row2 and $plot_row3 arrays
}

$my_page_title = 'My first PHP/JS Combo Foray';

?>

<html>
<head>
    <script type="text/javascript" src="/scripts/jquery-1.5.2.min.js"></script>
    <script type="text/javascript" src="/scripts/my_plotter.js"></script>
</head>
<body>

<h1><?php echo $my_page_title; ?></h1>

<div id="chartdiv">
    Hold on, javascript is loading the plot ...
</div>

</body>
</html>


<script type="text/javascript">
$(document).ready(function() {

    // we're combining the php array elements into a comma separated list
    // so that when the code is output javascript thinks it's an array.
    // if the $plot_row1 = array(1, 2, 3) then we'd get this:
    // 
    // row1 = [1, 2, 3];
    // 
    // if you needed quotes around the imploded php array values (if they
    // are strings where javascript is concerned) you could do this instead:
    // 
    // row1 = ["<?php echo substr(implode('","', $plot_row1), 0, -2); ?>"];

    row1 = [ <?php echo rtrim(implode(',', $plot_row1), ','); ?> ];
    row2 = [ <?php echo rtrim(implode(',', $plot_row2), ','); ?> ];
    row3 = [ <?php echo rtrim(implode(',', $plot_row3), ','); ?> ];

    // call your js function that creates the plot
    showBrittleness(row1,row2,row3);

    // add whatever js code you need to append the plot to $('#chartdiv')
}
</script>

UPDATE

更新

According to a cursory examination of the jqplot docs, if you edit line 12 of the javascript you link from this:

根据jqplot文档的粗略检查，如果您编辑javascript的第12行，您将从以下内容链接:

var plot1 = $.jqplot('chart1', [s1, s2], {

To this:

var plot1 = $.jqplot('chartdiv', [s1, s2], {

Your function should render the plot in the 'chartdiv' id element. It seems the first argument to the $.jqplot function is the element in which to create it ...

您的函数应该在“chartdiv”id元素中呈现该情节。这似乎是对美元的第一论点。jqplot函数是创建它的元素…

#1

First, use PHP to retrieve the data you need from the MySQL database.
首先，使用PHP从MySQL数据库检索所需的数据。
Then, output the plot data you retrieved using PHP inside a javascript code block as part of the HTML that PHP sends to the client.
然后，在javascript代码块中输出使用PHP检索的图数据，作为PHP发送给客户机的HTML的一部分。
Execute the javascript with the data seeded by PHP on page load.
使用PHP在页面加载时播种的数据执行javascript。