Построение диаграмм при помощи PHP
Наверняка многие уже задумывались о том, как на своем собственном сайте реализовать диаграммы. Есть, конечно, различные плагины, но в них, как правило, есть много лишнего и хочется что-нибудь свое.
В данной теме мы хотим предложить Вам довольно простой способ построения диаграммы на своем сайте на основе имеющегося массива данных. В рассматриваемом примере мы получаем нужный нам массив из MySQL. В массиве содержится 30 записей с количеством оценок, поставленных темам по дням.
Что из этого получилось, Вы можете наблюдать на скриншоте ниже:
Для построения диаграммы, как на скриншоте выше, для начала необходимо прописать стили, которые будут нами использоваться в рассматриваемом скрипте для отображения столбцов. Для этого поместите между тегами <head> и </head> вот такой код:
<style type="text/css">
.column { height:400px; width:18px; }
.column div { border:1px solid black; background:#090; width:16px; margin:-1px 0; }
.chart { background:url(image/chart.png) no-repeat; padding:4px; }
.height40 { height:40px; }
</style>Теперь можно переходить к строительству диаграммы. Для этого необходимо, чтобы у Вас был какой-нибудь массив данных, который бы содержал даты и значения, соответствующие этим датам. В рассматриваемом нами скрипте предполагается, что этот массив мы получаем из MySQL базы, и даты там хранятся в формате unixtime.
Собственно вот скрипт, который отвечает за построение диаграммы:
<?php
echo '<table cellspacing="10" cellpadding="0" width="100%">';
echo '<tr style="font-size:13px;">';
echo '<td align="right">';
$days=30;
for ($n=0; $n<=$days; $n++) $arr_date[]=date('Y m d',strtotime("-$days day+$n day"));
$period=floor(strtotime("-$days day")/86400)*86400;
$max=0; $number=0;
$res=mysqli_query($db,"SELECT count(id), FROM_UNIXTIME(date,'%Y %m %d') AS dat
FROM ocenki WHERE date>'".$period."' GROUP BY dat ORDER BY dat");
while ($arr_stat[]=mysqli_fetch_array($res)) {
if ($max<$arr_stat[$number][0]) $max=$arr_stat[$number][0];
$number++;
}
$max=ceil($max/10)*10;
for ($n=1; $n<=11; $n++) {
echo '<div style="height:40px;">'.round($max-$max*($n-1)/10).'</div>';
}
echo '</td><td valign="bottom">';
echo '<table style="background:url(1.png) no-repeat;padding:4px;" border="0"
cellspacing="3" cellpadding="0">';
echo '<tr valign="bottom">';
for ($n=0; $n<=$number; $n++)
$new_stat[array_search($arr_stat[$n]['dat'],$arr_date)]=$arr_stat[$n];
for ($n=1; $n<count($arr_date); $n++) {
echo '<td class="column">';
if (isset($new_stat[$n][0])) echo '<div style="height:'.
floor(400/$max*$new_stat[$n][0]).'px;" title="'.$new_stat[$n][0].'"></div>';
echo '</td>';
}
echo '</tr><tr style="font-size:13px;height:20px;" align="center">';
for ($n=1; $n<count($arr_date); $n++) echo '<td>'.substr($arr_date[$n],-2).'</td>';
array_splice($arr_stat,'');
array_splice($new_stat,'');
echo '</tr></table>';
echo '</td></tr></table>';
?>Теперь давайте остановимся и рассмотрим подробнее некоторые моменты. Как Вы могли догадаться, $days содержит количество дней по шкале X (в примере их 30), а $arr_date[] - последние 30 дат в виде массива, которые будут располагаться под шкалой X. $period соответствует времени 0 часов 00 минут первой даты массива $arr_date[]. Данная переменная нужна для правильного задания интервала в MySQL запросе, т.к. даты у нас в формате unixtime.
Далее мы при помощи запроса извлекаем из базы все записи за последние 30 дней и помещаем их в массив $arr_stat[]. Таким образом, в $arr_stat[] содержится количество оценок за день и дата этого дня (уже в формате "год месяц день"). Одновременно в переменную $max мы заносим максимальное количество оценок за день из всех полученных из MySQL записей. Далее строчкой $max=ceil($max/10)*10; мы округляем максимальное значение в большую сторону до десятков для того, чтобы разбить шкалу Y на 10 ровных интервалов.
Потом, при помощи обычного цикла создаем шкалу значений по Y, и переходим непосредственно к построению диаграммы. Обратите внимание, что у таблицы в стиле прописана картинка 1.png - это сетка, которую мы нарисовали, чтобы украсить диаграмму и сделать ее более наглядной и читабельной. Т.к. в скрипте высота одного интервала по шкале Y равна 40 пикселям, то и на сетке интервалы между линиями тоже равны 40 пикселям.
Далее скрипт автоматически высчитывает высоту каждого столбца относительно максимального значения и выводит его на экран в виде блока DIV с заливкой с указанной высотой.
Функция substr($arr_date[$n],-2) обрезает дату при выводе и выводит только дни месяца. Функции array_splice($arr_stat,''); и array_splice($new_stat,''); очищают массивы $arr_stat и $new_stat. Это нужно для того, чтобы в случае построения двух и более диаграмм не произошло добавление значений второй диаграммы к предыдущей.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
"dat" это что?
Т.е. отдельно такой код выборки данных для графика работает:
.....
$db=mysql_connect('localhost','root','pfhbycr');
mysql_select_db('test',$db);
//echo "$db_table"."</p>";
$zapros="SELECT sn, data, lv FROM $db_table WHERE sn='$sn1'";
$RESULT=mysql_query("$zapros",$db);
//echo "$RESULT </p>";
//echo "<a>res</a>"."</p>";
{
while($row=mysql_fetch_array($RESULT))
//$array_main=array($row);
//$array_id=array(data);
//$rw=array_multisort($row, $sn1, data);
{
$ttt=$row['data'];
//$tttt=$row['sn'];
$dd=$row['lv'];
echo "$ttt "." $dd"."</p>";
Здесь выборка по серийнику и далее...
Выдает как таблицу - значение, дата.
Как поправить Ваш код, чтоб получать данные из базы?