Создание графика jqplot на странице php - PullRequest
Новая
       2

Создание графика jqplot на странице php

1 голос
/ 08 декабря 2011

Я пытаюсь выучить php, выполняя небольшой проект с использованием сервера apache.У меня есть страница php, где я хочу отобразить гистограмму с помощью jqplot, используя данные, которые я извлекаю из запроса MySql.У меня уже есть запрос, дающий мне данные, которые я хочу.Проблема в том, что я не знаю, как реализовать это в графике jqplot.Я предполагаю, что мне нужно сделать вызов ajax, но если я могу избежать этого, я бы хотел.мой код страницы php пока здесь http://snipt.org/oknnl2. javascript для гистограммы здесь http://snipt.org/oknoi3.
я хочу, чтобы диаграмма отображалась в div id = chartdiv, который находится на строке 177. Мне нужно визуализировать какграфики.если я смогу получить некоторую помощь в этом, я уверен, что смогу использовать тот же процесс для создания других.

1 Ответ

4 голосов
/ 08 декабря 2011

PHP не может создать график javascript и отправить его клиенту в нисходящем направлении, но вам не нужно совершать реальный вызов AJAX после загрузки страницы. Достаточно простого javascript после загрузки страницы. Если вы получаете нужные данные на уровне PHP, вы можете сделать их доступными для JavaScript в HTML-коде, полученном клиентом. Шаги, чтобы это произошло:

  1. Сначала используйте PHP для извлечения необходимых данных из базы данных MySQL.
  2. Затем выведите данные графика, полученные с помощью PHP, внутри javascript. блок кода как часть HTML, который PHP отправляет клиенту.
  3. Выполнить JavaScript с данными, загруженными PHP при загрузке страницы.

Итак, упрощенный пример: 

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

Согласно краткому исследованию jqplot docs , если вы редактируете строку 12 javascript, на который вы ссылаетесь из этого: 

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

На это: 

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

Ваша функция должна отображать график в элементе id диаграммы. Кажется, первый аргумент функции $ .jqplot - это элемент, в котором она создается ...

...