Блог

Для начала - несколько слов о библиотеке.

pChart – это набор классов для построения графиков, диаграмм и т.п. в php. Подробную информацию об этой библиотеке можно найти на сайте http://www.pchart.net. Воспользовавшись pChart, веб разработчик существенно расширит cвои возможности, что в дальнейшем обеспечит прекрасные результаты. Вот пример использования:

Для функционирования pChart, на сервере должна быть установлена дополнительная библиотека для php. Итак, выполним следующие команды:

Для Linux систем: 

sudo apt-get install php5-gd
sudo /etc/init.d/apache2 restart

Для Windows необходимо раскомментировать строку в php.ini:

;extension=php_gd2.dll

и перезапустить Apache сервер.

Библиотеку pChart можно загрузить здесь.

Рассмотрим, как можно работать с библиотекой в Drupal 7. На сайте drupal.org существует одноименный модуль pChart, но, как написано в его документации, сам по себе он ничего не делает, а только обеспечивает основную оболочку для интеграции pChart с Drupal. Ми обойдемся без его использования.

Итак, для начала создадим папку pChart в sites/all/libraries и добавим туда все файлы библиотеки. Далее объявляем страницу, где будет размещаться наш график: 

/**
 * Implements hook_menu().
 */
function internetdevels_menu() {
  $items = array();
  $items['pchart'] = array(
    'page callback' => 'drupal_get_form',
    'page arguments' => array('internetdevels_pchart_form'),
    'access callback' => TRUE,
    'type' => MENU_CALLBACK,
  );
  return $items;
}

Зададим форму для введения данных а также кнопку для построения графика. Воспользуемся ajax с тем, чтобы в дальнейшем, при построении графика, избежать обновления страницы .

/**
 * Form for input values ​​to create schedule.
 */
function internetdevels_pchart_form($form, &$form_state) {
  $form = array();
  // Item for return schedule.
  $form['replace_textfield'] = array(
    '#markup' => '<div id="pchart_ajax"></div>',
  );
  $form['first_values'] = array(
    '#type' => 'textfield',
    '#title' => t('Enter values ​​for first schedule'),
    '#size' => 60,
    '#maxlength' => 128,
    '#required' => TRUE,
    '#description' => t('For fractional numbers use sign ".". Use the sign ";" to separate digits.'),
  );
  $form['second_values'] = array(
    '#type' => 'textfield',
    '#title' => t('Enter values ​​for second schedule'),
    '#required' => TRUE,
    '#description' => t('For fractional numbers use sign ".". Use the sign ";" to separate digits.'),
  );
  $form['confirm'] = array(
    '#type' => 'submit',
    '#value' => 'show schedule',
    '#ajax' => array(
      'callback' => 'internetdevels_pchart_ajax_callback',
      'wrapper' => 'pchart_ajax',
      'effect' => 'fade',
    ),
  );
  return $form;
}

И, собственно, построение графика по введенным данным:

/**
 * Construction schedule to the entered value.
 */
function internetdevels_pchart_ajax_callback($form, &$form_state) {
  // Create an array of values.
  $first_values  = explode(";", $form_state['input']['first_values']);
  $second_values = explode(";", $form_state['input']['second_values']);

  // Include required files with pChart library.
  $name = "pChart";
  if ($path = libraries_get_path($name)) {
    include("{$path}/class/pData.class.php");
    include("{$path}/class/pDraw.class.php");
    include("{$path}/class/pImage.class.php");
  }

  // Create and populate the pData object.
  $myData = new pData();

  // Build your data series.
  $myData->addPoints($first_values, 'first');
  $myData->addPoints($second_values, 'second');

  // Draw series with specified weight.
  $myData->setSerieWeight("first", 2);
  $myData->setSerieWeight("second", 2);

  // Create a pChart object.
  $myPicture = new pImage(700, 210, $myData);

  // Rectangular gradient area.
  $myPicture->drawGradientArea(0, 0, 700, 230, DIRECTION_VERTICAL, array("StartR" => 075, "StartG" => 0, "StartB" => 0, "EndR" => 50, "EndG" => 50, "EndB" => 50, "Alpha" => 80));

  // Font and background of the schedule.
  $myPicture->setFontProperties(array("FontName" => "{$path}/fonts/Forgotte.ttf", "FontSize" => 11));
  $myPicture->setGraphArea(20, 10, 700, 190);

  // Draw scale, spline chart and legend of the schedule.
  $myPicture->drawScale();
  $myPicture->drawSplineChart();
  $myPicture->drawLegend(600, 12, array("Style" => LEGEND_NOBORDER, "Mode" => LEGEND_HORIZONTAL));

  // Creates a full file path from a directory and filename for render and view picture.
  $output = file_create_filename('example.png', 'sites/default/files/pictures');
  $myPicture->Render($output);
  return '<div id="pchart_ajax"><img src="' . file_create_url($output) . '" /></div>';
}

Вот такой результат мы получим, когда введены значения и нажата кнопка построения графика:

Рассмотрим еще один пример, который будет строить диаграммы по заданным значениям:

/**
 * Construction schedule to the entered value.
 */
function internetdevels_pchart_ajax_callback($form, &$form_state) {
  $first_values = explode(";", $form_state['input']['first_values']);
  $second_values = explode(";", $form_state['input']['second_values']);
  $name = "pChart";
  if ($path = libraries_get_path($name)) {
    include("{$path}/class/pData.class.php");
    include("{$path}/class/pDraw.class.php");
    include("{$path}/class/pImage.class.php");
  }

  // Create and populate the pData object.
  $myData = new pData();
  $myData->addPoints($first_values, "First value");
  $myData->addPoints($second_values, "Second value");
  $myData->addPoints(array('Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'), "Day");

  // Add a description to one serie.
  $myData->setSerieDescription("Days", "Day");

  // Define the abscissa axis labels serie.
  $myData->setAbscissa("Day");
  $myPicture = new pImage(700, 230, $myData);
  $myPicture->setFontProperties(array("FontName" => "{$path}/fonts/Forgotte.ttf", "FontSize" => 11));
  $myPicture->setGraphArea(50, 30, 680, 200);  $myPicture->drawGradientArea(0, 0, 700, 230, DIRECTION_VERTICAL, array("StartR" => 075, "StartG" => 0, "StartB" => 0, "EndR" => 50, "EndG" => 50, "EndB" => 50, "Alpha" => 80));
  $myPicture->drawScale(array("CycleBackground" => TRUE, "DrawSubTicks" => TRUE, "GridR" => 185, "GridG" => 240, "GridB" => 120, "GridAlpha" => 10));
  $settings = array("Gradient" => TRUE, "GradientMode" => GRADIENT_EFFECT_CAN);

  // Draw a bar chart.
  $myPicture->drawBarChart($settings);
  $myPicture->drawLegend(540, 12, array("Style" => LEGEND_NOBORDER, "Mode" => LEGEND_HORIZONTAL));
  $output = file_create_filename('example.png', 'sites/default/files/pictures');
  $myPicture->Render($output);
  return '<div id="pchart_ajax"><img src="' . file_create_url($output) . '" /></div>';
}

А вот результат:
Как видно из примера, библиотека pChart - весьма полезный инструмент в арсенале программирования, с помощью которого можно строить графики разнличной степени сложности. Вместе с тем, методы использования библиотеки достаточно просты и доступны для понимания.

Ссылки по теме:

1) http://www.pchart.net/download
2) http://wiki.pchart.net
3) http://drupal.org/project/pchart

Join the conversation
0 Comments