Delphi programming blog
Источник: http://teran.karelia.pro/articles/item_4431.html
 

Google Chart Tools.

Опубликовано 08.07.2010 г. 13:00

Данная статья немного отклоняется от тематики блога, но все же связана немного с программированием, правда пример будет приведен с использованием PHP, что в принципе может быть полезно для владельцев сайтов/блогов. Речь пойдет о том, как можно с минимальными затратами отобразить на web-странице диаграмму.

Пару дней назад возникла необходимость в web-системе, отображающей всякие разные данные представить эти самые данные в виде диаграммы, чтобы получить наглядное представление динамики изменения значений. Требовалось изобразить три серии значений на заданный период времени. Изначально был предложен вариант использовать различные наборы классов, например jpGraph. Но суть задачи была в том, что требовалось сделать быстро, просто и решение это будет на короткий срок, в виду переработки данной системы. Google подсказал свое решение в виде Google Chart Tools, которое позволяет строить как интерактивные графики, так и простые, в виде растрового изображения. И рассмотрим мы второй вариант. Суть заключается в том, что мы передаем гуглу с помощью GET/POST запроса различные параметры нашего графика, а в ответ получаем построенное изображение. Удобство данного метода может состоять, например, в том, что такую URL можно смело подставить в виде значения атрибута src тега img. Конечно же есть некоторые ограничения накладываемые на такие графики, так например максимальная площадь изображения не должна превышать 300к точек (чуть менее чем 640х480), но как вы распределите эту площадь - это ваше дело. Так же есть ограничения на конечный размер изображения в байтах. Допустим в нашем PHP скрипте мы извлекаем некоторый набор данных, который содержит год (Ох), номер серии и значение (Оу). Далее мы хотим отобразить эти данные на графике в виде ломаных. Заполним массив данных из БД, например, следующим образом (с использованием стандартных ODBC функций):
    $data = array();
    $maxValue = 0;
    while($row = odbc_fetch_array($result)){
        $year = $row['year'];
        $data[$row['series']][$year] = $row['value'] ;
        $maxValue = max($maxValue, $row['value']);
    }

    $startYear = min(array_keys($data[1]));
    $endYear   = max(array_keys($data[1]));
Сразу же найдем максимальное значение для всех точек графика. Максимальное значение нам потребуется потому, что область допустимых значений отображаемых на диаграмме - 100х100 точек, поэтому все значения нам прийдется нормировать; также определим начальный и конечный год, на которые есть значения. В данном случае для всех трех серий диапазон значений лет одинаков. Заведем для описание серий следующий массив: в котором опишем названия серий, их цвета, и их значения:
    $seriesInfo  = array(
                            'titles' => array('ВПО','СПО','НПО'),
                            'utf-titles' => array(),
                            'colors' => array('f4972a','4e6fa8','b5d964'),
                            'values' => array(),
                        );
Нормируем значения серий величиной 100. Одновременно составим из массивов значений строки, где значения разделены запятой, т.к в таком виде они передаются как параметр:
    $norm_values = array();
    foreach($data as $s=>$item){
        $norm_values[$s] = array();
        foreach($item as $year=>$value) $norm_values[$s][$year] = round($value * (100/$maxValue),2);
        $seriesInfo['values'][$s] = implode(',', $norm_values[$s]);
    }
Вообще округлять можно до целого. Все названия и заголовки должны быть переданы в кодировке UTF-8 и закодированы с помощью urlencode(). Поэтому изменим наши названия в описании серий:
    foreach($seriesInfo['titles'] as $k=>$v){
        $v = iconv('windows-1251', 'UTF-8', $v);
        $seriesInfo['utf-titles'][$k] = urlencode($v);
    }
Далее можно приступить непосредственно к составлению URL для получения диаграммы. Делать это будем по шагам, каждый раз добавляя разные параметры. Для передачи настроек для разных серий обычно параметры объединяются с помощью вертикальной черты |
  1. Базовая URL для работы получения графика:
    $chartURL = "http://chart.apis.google.com/chart?"
  2. Укажем размер изображения (параметр chs):
    $chartURL.= "&chs=620x480"
  3. Укажем тип диаграммы (cht), можно рисовать множество разных диаграмм, но нам требуется линейные, причем предполагается, что значения точек х будут последовательными и равномерно распределенными по всей оси (lc)
    $chartURL.= "&cht=lc";
  4. Можем указать заголовок (chtt)
    //    $chartURL.= "&chtt=".urlencode(CHART_TITLE);
  5. Размер тиков на оси (0 - индекс оси (в нашем случае Ох), 7 размер в точках)
    $chartURL.= "&chxtc=0,7";
  6. Формат подписей для осей. Значения для каждой оси отделены, как говорилось, вертикальной чертой. Для Ох (индекс 0) указан цвет 000000 (черный). Далее 1- Оу: указан формат N*s* - отделение разрядов, и через запятую опять цвет.
    $chartURL.= "&chxs=0,000000|1N*s*,000000";
  7. Фоновый градиент для диаграммы: bg - весь фон, lg- линейный градиент, под углом 90. далее начальный цвет и его позиция, потом конечный цвет и его позиция.
    $chartURL.= "&chf=bg,lg,90,ffffff,1,e1e7f0,0";
  8. Указываем через какие интервалы будет фоновая решетка. Для каждой оси, через запятую
    $chartURL.= "&chg=20,20";
  9. Собственно перечисляем какие у графика есть оси. Ох указали первой, поэтому и индекс у нее 0, и так далее.
    $chartURL.= "&chxt=x,y";
  10. Передадим названия серий, объединенных в строку, разделены вертикальной чертой
    $chartURL.= "&chdl=". implode('|', $seriesInfo['utf-titles']);
  11. А так же цвета для серий, строка с запятыми
    $chartURL.= "&chco=". implode(',', $seriesInfo['colors']);
  12. Значения мы уже объединили в строки, теперь разделим их по сериям с вертикальной чертой
    $chartURL.= "&chd=t:".implode('|', $seriesInfo['values']);
  13. Как я уже говорил значения координат не превышают 100. Но можно реализовывать различные подписи. Для Ох установим диапазон до начального до конечного года, с шагом 1. Для Оу диапазон от 0 до maxValue, без указания шага.
    $chartURL.= "&chxr=0,$startYear,$endYear,1|1,0,$maxValue";
  14. на последнем шаге остается подставить нашу URL в img/src. Результат может получиться примерно такой:
Метки:  chart  |  google  |  php 

Комментарии

Нет комментариев
- Имя
- e-mail*
- Сайт
вы можете использовать теги [i],[b],[code],[quote]
Дополнительно