Categories

(83)
(69)
(8)
(34)
(74)
(149)

Chart Plotting in Drupal Via Library pChart

21.02.2013
Chart Plotting in Drupal Via Library pChart
Author:

Let us give a brief outline of the library to be going with.

pChart is a set of classes that were designed by web developers for plotting charts, diagrams, etc. on PHP. For more specific information on this library, you can refer to http://www.pchart.net web-site. In fact, the results achievable with the use of pChart can be striking, e.g.:

So as to insure proper functioning of the pChart you will have to have the additional library for PHP installed on your server. For this, the following set of commands can be run

for Linux-systems:

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

for Windows, you will have to comment the bar in php.ini:

;extension=php_gd2.dll

After that, you'll need to restart the Apache server.

The pChart library can be downloaded from here.

Now it is time to look at how the library works with Drupal 7. There is a module (of the same name) pChart accessible on drupal.org web-site which you can make use of. As it is specified in its documentation, the only thing it does on its own is creating the basic wrapper for pChart integration with Drupal. Thus, we can easily do without it.

First, the pChart folder needs to be created in sites/all/libraries directory, with all library files eventually pasted into it. After that, we will announce the page our of chart's location:

/**
 * 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;
}

Now let's make a form for the data input and the button for chart plotting. We'll make use of AJAX, thus skipping the necessity to refresh the page when the chart will be plotted.

/**
 * 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;
}

Here is the chart as having been plotted with the help of input data:

/**
 * 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>';
}

All values being entered and the chart plotting button pushed, the screen looks as follows:

Here is another instance of chart plotting, performed with the use of set values:

/**
 * 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>';
}

The ultimate result looks as follows:
As you can see, pChart library is a very useful tool which is capable of plotting charts of all complexity levels; and its methods are quite explicit and easy to understand.

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

6 votes, Rating: 5

Read also

1

There are situations when you need to transfer data from one database to another. This article is meant to cater for such instances.

2

Nowadays iPhone and iPad (further iGadgets) are not something unfamiliar for us. Very often developers come across with the tasks connected with the realization of functional for these...

3

There may be instances when a web developer needs to transfer some database changes from one site to another. Moving the...

4

As social networks gain more and more ground customers are often confronted with the task of integrating their sites with Facebook, Twitter, Google+, etc. ...

5

It is common knowledge that Google Analytics (hereinafter GA) is a powerful tool for collecting data about user...

Subscribe to our blog updates