Построение графиков с помощью PHP и Flash
Часто перед web программистом стоит задача построении графиков или диаграмм. Существует много способов решение этой проблемы и об одном из них сегодня пойдет речь. Я покажу как можно с легкостью строить красивые и интерактивные Flash графики используя PHP
Для построение графиков существует множество бесплатных и платных решений на Flash. В этой статье я буду использовать FusionCharts Free. Я остановил свой выбор на FusionCharts по нескольким причинам:
- Это бесплатное решение;
- Большой выбор типов графиков и диаграмм;
- Отличная документация.
И так, начнем. Вначале нужно скачать FusionChartsFree.zip c официального сайта и распаковать архив. Из архива нам понадобятся следующие файлы:
- FCF_MSLine.swf - флешка, которая будет строить графики;
- FusionCharts.js — JavaScript библиотека.
Для того чтобы поместить график на страницу нужно вставить в HTML шаблон следующий код:
-
-
FusionCharts.
-
-
var chart = new FusionCharts("FCF_MSLine.swf", "ChartId", "600", "350");
-
chart.setDataURL("Data/MSLine.xml");
-
chart.render("chartdiv");
-
Остановимся подробнее на строке chart.setDataURL(«Data/MSLine.xml»);, она нужна для загрузки данных графика их XML файла находящегося а сервере. В нашем случае будет удобнее использовать функцию setDataXML(), это позволить вставить XML данные непосредственно на страницу с графиком.
Теперь перейдем непосредственно к реализации класса для построения графиков:
-
-
-
Class lineChart
-
{
-
//Зададим пути к требуемым файлам
-
const FLASH_PATH="./FCF_MSLine.swf";
-
const JAVASCRIPT_PATH="./FusionCharts.js";
-
-
private $id; //Идентификатор гафика на странице
-
private $width; //Ширина графика
-
private $height; //Высота графика
-
private $caption; //Заголовок
-
private $category; //Массив категорий (значения оси X)
-
private $linesArray;//Массив линий
-
-
-
/**
-
* Задаем начальные параметры графика
-
*
-
* @param string $id Идентификатор графика на странице
-
* @param int $width Ширина
-
* @param int $height Высота
-
*/
-
public function __construct($id="myChart", $width=400, $height=300)
-
{
-
$this->id = $id;
-
$this->width = $width;
-
$this->height = $height;
-
}
-
-
-
/**
-
* Добавление категорий
-
*
-
* @param array $data массив значений
-
*/
-
public function setCategory($data)
-
{
-
$this->category = $data;
-
}
-
-
-
/**
-
* Добавление линии на график
-
*
-
* @param string $name Название линии
-
* @param array $data Массив точек линии
-
* @param string $color Цвет линии в формате RGB
-
*/
-
public function addLine($name, $data, $color)
-
{
-
$this->linesArray[] = array(
-
"name" => $name,
-
"data" => $data,
-
"color"=> $color
-
);
-
}
-
-
/**
-
* Установка заголовка графика
-
*
-
* @param string $caption
-
*/
-
public function setCaption($caption)
-
{
-
$this->caption = $caption;
-
}
-
-
-
/**
-
* Формирует данные для графика в XML формате
-
*
-
* @return sring данные в формате XML
-
*/
-
private function buildXmlData()
-
{
-
$xml = "";
-
-
//Формируем категории
-
foreach($this->category as $category){
-
$xml .= "
"; -
}
-
$xml = "
$xml "; -
-
//Формируем данные линий
-
foreach($this->linesArray as $line){
-
$lineXml = '';
-
foreach($line['data'] as $dot){
-
$lineXml .= "
"; -
}
-
$xml .= "
-
."color='{$line['color']}'>$lineXml";
-
}
-
-
//Формируем конечный XML
-
return "
$xml "; -
}
-
-
-
/**
-
* Возвращает HTML код, для добавления графика на страницу
-
*
-
* @return string
-
*/
-
public function render()
-
{
-
return
-
"
-
FusionCharts.
-
-
var chart = new FusionCharts('".self::FLASH_PATH."',
-
'{$this->id}', '{$this->width}', '{$this->height}');
-
chart.setDataXML(\"".$this->buildXmlData()."\");
-
chart.render('{$this->id}');
-
";
-
}
-
}
Небольшой пример работы класса:
-
include "lineChart.class.php";
-
$graph = new lineChart();
-
$graph->setCategory(array("1.01.2009",
-
"2.01.2009",
-
"3.01.2009",
-
"4.01.2009",
-
"5.01.2009",
-
"6.01.2009"));
-
-
$graph->addLine("Доллар", array(30,31,32,28,25,36), "1D8BD1");
-
$graph->addLine("Евро", array(45,40,43,48,35,44), "F1683C");
-
$graph->setCaption("Курс валют");
-
echo $graph->render();
И вот что получиться в результате.
Надеюсь, статья будет полезна начинающим PHP программистам. С радостью выслушаю ваши отзывы и комментарии.
Отлично! То что искал. Спасибо за доходчивые объяснения.
Очень полезная вещь! Единственная проблема — кодировка. Если оставляю UTF-8, то на графике русский, а на всей странице сплошные квадратики. Если ставлю windows-1251 — на графике не понятные знаки (там, где русский язык), зато вся страница нормально на русском. Подскажите, пожалуйста, как это исправить?
@Костя
А что мешает на график подавать русские буквы пропущенные через iconv ?
вот еще интересный способ))
http://prootime.ru/css-graph
Как добавить в этот график горизонтальный скролинг?