RSS
 

Google Chart API + MYSQL + PHP

20 Апр

Ниже я  приведу код, который позволяет достаточно просто отображать содержимое базы данных MYSQL.

Опишу принцип идеи:

Есть таблица с данными MYSQL, она содержит три колонки DATA1,DATA2,DATA3 . При помощи PHP считываются данные первых двух колонок, и в результате строится график с использованием Scatter Chart (Google Chart API). DATA2 -задаёт координаты Y точки,  DATA1 – соответсвенно X.

А теперь более подробно рассмотрим каждый этап.

Начинать следует с создания базы данных MYSQL.

MYSQL

Сначала необходимо подключиться к базе данных. Для Windows необходимо выбрать ПУСК->MYSQL->MYSQL Command line Client

Перед вами появиться чёрное окно. В нём следует набрать:

  • CREATE DATABASE products;  (Создали базу данных products)
  • USE products; (Выбрать базу данных products)
  • CREATE TABLE data (DATA1 VARCHAR(20), DATA2 VARCHAR(20),DATA3 VARCHAR(20)); (Создали таблицу с именем data и тремя столбцами)
  • LOAD DATA LOCAL INFILE «C:\\mysql1.txt» INTO TABLE products; (Создали базу данных из размеченного текстового файла mysql1.txt. Не забываем, что число столбцов соответсвует числу столбцов таблицы и разделяется табуляцией , а не пробелами)

КОД PHP + Google Chart API

Ниже приведён код , который обеспечивает чтение из базы данных . А затем построение соответсвующего графика.

Для более быстрого понимания структуры кода, я выделил цветом каждый из основных моментов,  которые этот код содержит.

Зелёный цвет- соответсвует коду подключения к базе данных products MYSQL

Голубой цвет – код создания строки javascript кода, который затем будет записан в файл file.html.

Оранжевый цвет- создание файла с кодом диаграммы и подключение его директивой include (‘file.html’) ;

Чёрный цвет - вспомогательный код отображения и считывания данных . Считываются в данном случае два первых столбца таблицы : DATA1 и DATA2.

Этот код и файл mysql1.txt  рекомендуется скачать отсюда. Лично я бы не советовал просто копировать код из браузера:

Вот ещё ссылка
GoogleCHARTAPIMYSQLPHP
GoogleCHARTAPIMYSQLPHP
googleCHARTAPIMYSQLPHP.rar
Версия: 1.0
1.4 KiB
482 Загрузки
Details...


<?
/* Скрипт позволяет графически отображать данные таблицы */
/* Переменные для соединения с базой данных */
$hostname = «localhost»;
$username = «root»;
$password = «»;
$dbName = «products»;
/* Таблица MySQL, в которой хранятся данные */
$userstable = «data»;
/* создать соединение */
mysql_connect($hostname,$username,$password) OR DIE(«Не могу создать соединение «);
/* выбрать базу данных. Если произойдет ошибка – вывести ее */
mysql_select_db($dbName) or die(mysql_error());
/* составить запрос, который выберет все поля таблицы */
$query = «SELECT * FROM $userstable «;
/* Выполнить запрос. Если произойдет ошибка – вывести ее. */
$res = mysql_query($query) or die(mysql_error());
/* Как много нашлось таких */
$number = mysql_num_rows($res);
/* открыть файл и начать создание строки записи функции Google Chart API*/
$file = fopen («file.html»,»w»);
$str = «
<html>
<head>
<script type=\»text/javascript\» src=\»http://www.google.com/jsapi\»></script>
<script type=\»text/javascript\»>
google.load(\»visualization\», \»1\», {packages:[\"scatterchart\"]});
google.setOnLoadCallback(drawChart);
function drawChart() {       var data = new google.visualization.DataTable();
data.addColumn(‘number’, ‘DATA1′);
data.addColumn(‘number’, ‘DATA2′);
data.addRows(«.$number.»);\n»;
$amount=0;
if ($number == 0) {
echo «<CENTER><P>Ничего нет </CENTER>»;
} else {
echo «<CENTER><P>Вот из этих данных и будет построен график (Scatter Chart), всего точек: $number<BR><BR>»;
/* Получать по одной строке из таблицы в массив $row, пока строки не кончатся */
while ($row=mysql_fetch_array($res)) {
echo «Первое поле таблицы :  ».$row['DATA1'].» вот.<BR>»;
echo «Второе поле таблицы: «.$row['DATA2'];
echo «<BR><BR>»;
$str.=«data.setValue(«.$amount.», 0,».$row['DATA1'];
$str.=«);\ndata.setValue(«.$amount.», 1,».$row['DATA2'];
$str.=«);\n»;
$amount+=1;
}
echo «</CENTER>»;
}
$str.= » var chart = new google.visualization.ScatterChart(document.getElementById(‘chart_div’));
chart.draw(data, {width: 400, height: 240, titleX: ‘DATA1′, titleY: ‘DATA2′, legend: ‘none’, pointSize: 5});
}
</script>
</head>
<body>
<div id=\»chart_div\»></div>
</body>
</html>
«;
if ( !$file )
{
echo(«Ошибка открытия файла»);
}
else
{
fputs ( $file, $str);
}
fclose ($file);
?>
<?
/*Начертить диаграмму*/
include (‘file.html’) ;
?>
Если всё сделано правильно, то  результат должен быть таким:

Результат работы скрипта в браузере должен выглядеть так

Google Bookmarks Reddit Technorati Yahoo My Web БобрДобр.ru Memori.ru МоёМесто.ru
 
3 коммент.

Опубликовано в рубрике Google Chart Api and Seo

 

Прокомментировать

 
 
  1. cmd

    04.07.2010 - 14:55

    Хорошо, но мало. Надо писать на 4 разных вида диаграмм минимум, иначе – нет смысла

     
  2. Peter

    15.03.2012 - 09:25

    Спасибо, отличное решение, долго искал.

     
  3. Юрий

    07.04.2012 - 22:56

    Отлично, жалко не показали в примере как соединять точки

     
 
Система Orphus

Enter your email address:

Delivered by FeedBurner

.