Формирование графиков
Новый

РазработчикуНовый

В программе "Клиентская база" имеется возможность вывода информации в графическом виде. Данная возможность может быть использована при формировании отчетов, а также для вывода в одном из полей таблицы графического отображения информации из подтаблицы каждой записи.

zoom

Последовательность построения графика:

  1. Подготовка данных
  2. Выбор типа графика (Гистограмма, Круговая, Линейная, Линейная по датам)
  3. Получение JS-скрипта от функции draw_graph($data, $settings)
  4. Передача JS-скрипта в код Отображения отчета
  5. Дополнения в коде Отображения отчета

 

Подготовка данных

Данные могут быть представлены в виде серий, от одной до нескольких. В серии могут быть как несколько чисел, разделенных запятыми, так и парные данные, характеризующие координаты точки на графике (например, для графиков типа Линейная, Линейная по датам) или «ключ»-«значение» (для круговой).
Данные подготавливаются в части представления «Подготовка данных».
 

Примеры:
$data = array();
$data[] = array(2,б,7,5,3);

$data = array();
$data[] = array('a'=>5,'b'=>99,'c'=>8,'d'=>12);
$data[] = array('a'=>18,'b'=>76,'c'=>23,'d'=>14);

$data = array('янв'=>2,'фев'=>6,'мар'=>7,'апр'=>10,'май'=>3,'июнь'=>6);

$graph_data= array();
$graph_data[] = array(1=>6.5, 3=>9.2, 14, 6=>19.65, 26.4, 35, 51);

$graph_data = array();
$graph_data[] = array('2012-01-01'=>6.5, '2012-01-02'=>9.2, '2012-01-03'=>14, '2012-01-04'=>19.65);
$graph_data[] = array('2012-01-01'=>8.5, '2012-01-02'=>19.2, '2012-01-03'=>24, '2012-01-04'=>29.65);

 

Выбор типа графика

В программе "Клиентская база" возможно создание 4 видов отчетов

  • Линейный по точкам (Line)

zoom

  • Линейный по датам (LineDate)

zoom

  • Круговой (Pie)

zoom

  • Гистограмма (Bars)

zoom

 

Получение JS-скрипта от функции draw_graph($data, $settings)

Код JS-скрипта получаем так $grapf =  draw_graph($data, $settings)
где $settings — параметры:

Параметр Тип Описание
type_graph текст Тип графика: Bars, Pie, Line1, LineDate
title текст Заголовок графика
div_id текст id тега для графика
title_fontSize число Размер шрифта заголовка в pt, например 16
title_fontFamily текст Название шрифта заголовка , например Arial
x_label, y_label текст Надпись по оси
x_fontSize, y_fontSize число Размер шрифта надписи по соответствующей оси в pt, например 16
x_fontFamily, y_fontFamily текст Название шрифта надписи по соответствующей оси, например Arial
series_names текст Название серий данных
min и max число Max и min значения по  соответствующей оси
zoom true/false Режим масштабирования графика для типа  Line
view_time true/false Отображение времени для графика типа LineDate
view_sec true/false Отображение секунд для графика типа LineDate

 

Примеры программного кода:
// Bars
$data = array();
$data[] = array('a'=>2,'b'=>6,'c'=>7,'d'=>10);
//$data[] = array('a'=>8,'b'=>6,'c'=>3,'d'=>13);
$settings = array('type_graph' => 'Bars'
              ,'title' => 'График - гистограмма'
              ,'title_fontSize' => 16
              ,'div_id' => 'chart1'
            );
$data_gr = draw_graph($data, $settings);

// Bars_m
$data = array();
$data[] = array('a'=>5,'b'=>99,'c'=>8,'d'=>12);
$data[] = array('a'=>18,'b'=>76,'c'=>23,'d'=>14);
//$data[] = array('a'=>8,'b'=>6,'c'=>3,'d'=>13);
$settings = array('type_graph' => 'Bars'
              ,'title' => 'График - гистограмма'
              ,'div_id' => 'chart2'
            );
$data_gr =  draw_graph($data, $settings);

// Pie
$data = array('янв'=>2,'фев'=>6,'мар'=>7,'апр'=>10,'май'=>3,'июнь'=>6);
$settings = array('type_graph' => 'Pie'
              ,'title' => 'График - круговая'
              ,'div_id' => 'chart3'
            );
$data_gr =  draw_graph($data, $settings);

// Line1
$data = array();
$data[] = array(6.5, 9.2, 14, 19.65, 26.4, 35, 51);
$settings = array('type_graph' => 'Line1'
              ,'title' => 'График - линейный, с zoom'
              ,'div_id' => 'chart4'
              ,'x_label' => 'Точки по оси X'
              ,'x_fontFamily' => 'Helvetica'
              ,'x_fontSize' => 14
              ,'y_label' => 'Значения по оси Y'
              ,'y_fontFamily' => 'Helvetica'
              ,'y_fontSize' => 13
              ,'zoom' => true
            );
$data_gr =  draw_graph($data, $settings);

// Line2
$graph_data= array();
$graph_data[] = array(1=>6.5, 3=>9.2, 14, 6=>19.65, 26.4, 35, 51);
$graph_data[] = array(1=>3.5, 19.2, 16, 29.65, 20.4, 32, 41);
$graph_settings = array('type_graph' => 'Line1'
              ,'title' => 'График - линейный, с zoom'
              ,'div_id' => 'chart5'
              ,'x_label' => 'Точки по оси X'
              ,'x_fontFamily' => 'Helvetica'
              ,'x_fontSize' => 14
              ,'y_label' => 'Значения по оси Y'
              ,'y_fontFamily' => 'Helvetica'
              ,'y_fontSize' => 13
              ,'zoom' => true
            );
$data_gr =  draw_graph($graph_data, $graph_settings);

// Line3
$graph_data = array();
$graph_data[] = array('2012-01-01'=>6.5, '2012-01-02'=>9.2, '2012-01-03'=>14, '2012-01-04'=>19.65);
$graph_data[] = array('2012-01-01'=>8.5, '2012-01-02'=>19.2, '2012-01-03'=>24, '2012-01-04'=>29.65);
$graph_settings = array('type_graph' => 'LineDate'
              ,'title' => 'График - линейный (дата по х), с zoom'
              ,'div_id' => 'chart6'
              ,'series_names' => "'C1','C2'"
              ,'y_max' => 40
              ,'x_max' => '2012-01-05'
              ,'zoom' => true
            );
$data_gr =  draw_graph($graph_data, $graph_settings);

 

Передача JS-скрипта в код Отображения отчета

$smarty->assign("graph1", $data_gr);

 

Дополнения в разделе отчета "Отображения"

В начале этой части отчета, необходимо добавить следующие 2 строки:

<script type="text/javascript" src="include/jqplot/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="include/jqplot/jquery.jqplot.min.css" />

Далее, в зависимости от типа графика и его параметров дополнительно выборочно:
<script type="text/javascript" src="include/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="include/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="include/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="include/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="include/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="include/jqplot/plugins/jqplot.cursor.min.js"></script>

Важно: последнюю строку необходимо подключать только для графика типа Line при использовании масштабирования. При ее использовании на графиках Bars и Pie возможно появление ошибки в JS.

Формирование div-тега в коде Отображении отчета

<div id='chart1'></div>
где  chart1 — уникальное id тега

Важно: Для отображения графика в код Отображения отчета необходимо добавить строку, выводящую переменную с данными:
{$graph1}



comments powered by HyperComments

+ сегодня

компаний уже выбрали Клиентскую базу!
Узнайте, почему.

  • компания
  • компании
  • компаний
  • выбрала
  • выбрали
  • выбрали

Создайте собственный аккаунт прямо сейчас! Бесплатно! Создать аккаунт