Главная > PHP > Построение графиков с помощью PHP и Flash

Построение графиков с помощью PHP и Flash

22 Май 2009 Написать комментарий К комментариям

char

Часто перед web программистом стоит задача построении графиков или диаграмм. Существует много способов решение этой проблемы и об одном из них сегодня пойдет речь. Я покажу как можно с легкостью строить красивые и интерактивные Flash графики используя PHP

Для построение графиков существует множество бесплатных и платных решений на Flash. В этой статье я буду использовать FusionCharts Free. Я остановил свой выбор на FusionCharts по нескольким причинам:

  • Это бесплатное решение;
  • Большой выбор типов графиков и диаграмм;
  • Отличная документация.

И так, начнем. Вначале нужно скачать FusionChartsFree.zip c официального сайта и распаковать архив. Из архива нам понадобятся следующие файлы:

  • FCF_MSLine.swf - флешка, которая будет строить графики;
  • FusionCharts.js — JavaScript библиотека.

Для того чтобы поместить график на страницу нужно вставить в  HTML шаблон следующий код:

  2. FusionCharts.
  4.  var chart = new FusionCharts("FCF_MSLine.swf", "ChartId", "600", "350");
  5.  chart.setDataURL("Data/MSLine.xml");    
  6.  chart.render("chartdiv");

Остановимся подробнее на строке chart.setDataURL(«Data/MSLine.xml»);, она нужна для загрузки данных графика их XML файла находящегося а сервере. В нашем случае будет удобнее использовать функцию setDataXML(), это позволить вставить XML данные непосредственно на страницу с графиком.

Теперь перейдем непосредственно к реализации класса для построения графиков:

  2.  
  3. Class lineChart
  4. {
  5.     //Зададим пути к требуемым файлам
  6.     const FLASH_PATH="./FCF_MSLine.swf";
  7.     const JAVASCRIPT_PATH="./FusionCharts.js";
  8.  
  9.     private $id;        //Идентификатор гафика на странице
  10.     private $width;     //Ширина графика
  11.     private $height;    //Высота графика
  12.     private $caption;   //Заголовок
  13.     private $category;  //Массив категорий (значения оси X)
  14.     private $linesArray;//Массив линий
  15.  
  16.    
  17.     /**
  18.      *  Задаем начальные параметры графика
  19.      *
  20.      * @param string $id Идентификатор графика на странице
  21.      * @param int $width Ширина
  22.      * @param int $height Высота
  23.      */
  24.     public function __construct($id="myChart", $width=400, $height=300)
  25.     {
  26.         $this->id = $id;
  27.         $this->width = $width;
  28.         $this->height = $height;
  29.     }
  30.  
  31.  
  32.     /**
  33.      * Добавление категорий
  34.      *
  35.      * @param array $data массив значений
  36.      */
  37.     public function setCategory($data)
  38.     {
  39.         $this->category = $data;
  40.     }
  41.  
  42.  
  43.     /**
  44.      *  Добавление линии на график
  45.      *
  46.      * @param string $name Название линии
  47.      * @param array $data Массив точек линии
  48.      * @param string $color Цвет линии в формате RGB
  49.      */
  50.     public function addLine($name, $data, $color)
  51.     {
  52.         $this->linesArray[] = array(
  53.             "name" => $name,
  54.             "data" => $data,
  55.             "color"=> $color
  56.         );
  57.     }
  58.  
  59.     /**
  60.      * Установка заголовка графика
  61.      *
  62.      * @param string $caption
  63.      */
  64.     public function setCaption($caption)
  65.     {
  66.         $this->caption = $caption;
  67.     }
  68.  
  69.  
  70.     /**
  71.      * Формирует данные для графика в XML формате
  72.      *
  73.      * @return sring данные в формате XML
  74.      */
  75.     private function buildXmlData()
  76.     {
  77.         $xml = "";
  78.  
  79.         //Формируем категории
  80.         foreach($this->category as $category){
  81.             $xml .= "";
  82.         }
  83.         $xml = "$xml";
  84.  
  85.         //Формируем данные линий
  86.         foreach($this->linesArray as $line){
  87.             $lineXml = '';
  88.             foreach($line['data'] as $dot){
  89.                 $lineXml .= "";
  90.             }
  91.             $xml .= "
  92.                       ."color='{$line['color']}'>$lineXml";
  93.         }
  94.  
  95.         //Формируем конечный XML
  96.         return "$xml";
  97.     }
  98.  
  99.  
  100.     /**
  101.      *  Возвращает HTML код, для добавления графика на страницу
  102.      *
  103.      * @return string
  104.      */
  105.     public function render()
  106.     {
  107.         return
  108.         "
  109.        
    FusionCharts.
  110.        
  111.        var chart = new FusionCharts('".self::FLASH_PATH."',
  112.         '{$this->id}', '{$this->width}', '{$this->height}');
  113.        chart.setDataXML(\"".$this->buildXmlData()."\");
  114.        chart.render('{$this->id}');
  115.        ";
  116.     }
  117. }

Небольшой пример работы класса:

  1. include "lineChart.class.php";
  2. $graph = new lineChart();
  3. $graph->setCategory(array("1.01.2009",
  4.                           "2.01.2009",
  5.                           "3.01.2009",
  6.                           "4.01.2009",
  7.                           "5.01.2009",
  8.                           "6.01.2009"));
  9.  
  10. $graph->addLine("Доллар", array(30,31,32,28,25,36), "1D8BD1");
  11. $graph->addLine("Евро", array(45,40,43,48,35,44), "F1683C");
  12. $graph->setCaption("Курс валют");
  13. echo $graph->render();

И вот что получиться в результате.

Пример работы класса

Скачать пример и класс

Надеюсь, статья будет полезна начинающим PHP программистам. С радостью выслушаю ваши отзывы и комментарии.

Categories: PHP Tags: ,
Комментарии (5) Уведомления (0) Написать комментарий Уведомление
  1. Гонзо
    30 Июнь 2009 в 22:45 | #1
    Ответить | Цитата

    Отлично! То что искал. Спасибо за доходчивые объяснения.

  2. Костя
    16 Июль 2009 в 16:22 | #2
    Ответить | Цитата

    Очень полезная вещь! Единственная проблема — кодировка. Если оставляю UTF-8, то на графике русский, а на всей странице сплошные квадратики. Если ставлю windows-1251 — на графике не понятные знаки (там, где русский язык), зато вся страница нормально на русском. Подскажите, пожалуйста, как это исправить?

  3. Снайпер
    27 Ноябрь 2009 в 11:57 | #3
    Ответить | Цитата

    @Костя
    А что мешает на график подавать русские буквы пропущенные через iconv ?

  4. Вася
    11 Май 2010 в 21:15 | #4
    Ответить | Цитата

    вот еще интересный способ))
    http://prootime.ru/css-graph

  5. votia
    24 Май 2012 в 19:34 | #5
    Ответить | Цитата

    Как добавить в этот график горизонтальный скролинг?

  1. Пока что нет уведомлений.