Побудова графіків в Drupal із використанням бібліотеки pChart.

Задамо форму для уведення даних а також кнопку для побудови графіка. Використаємо 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