JpGraph tutorial

To integrate the JpGraph library into your website just follow the steps described below. Good luck and happy coding! ;-)

--Andyknownasabu 19:08, 8 February 2008 (CST)

(1) Make sure your PHP version provides the following features:

• GD support
• GIF read support
• GIF create support
• JPG support
• PNG support
• WBMP support
• XPM support
• XBM support

(2) Download the latest JpGraph tarball from http://www.aditus.nu/jpgraph/ and extract the "src" directory of the archive as "protected/lib/jpgraph"

(3) Edit "protected/application.xml" and add a new entry in the services section:

<service id="graph" class="Application.common.GraphService" Width="600" Height="400" Shadow="false" />

(4) Create a file "GraphService.php" in the directory "protected/common" as just defined in "application.xml":

<?php
/**
 * GraphService.php
 *
 * Copyright 2008 by Andreas Bulling
 * All rights reserved.
 * 
 * Terms of use and modification:
 * 
 * You may modify the following source code as you receive it, in any medium,
 * provided that you conspicuously and appropriately retain the above
 * original copyright notice.
 * 
 */
 
include_once('protected/lib/jpgraph/jpgraph.php');
include_once('protected/lib/jpgraph/jpgraph_bar.php');
include_once('protected/lib/jpgraph/jpgraph_line.php');
 
class GraphService extends TService {
 
	private $type;
	private $xdata = null;
	private $ydata1 = null;
	private $ydata2 = null;
	private $ytitle = null;
	private $width = 500;
	private $height = 400;
	private $shadow;
 
	public function init($config) {
		$request = Prado::getApplication()->getRequest();
 
		if ($request->contains('graph')) {
			$this->type = TPropertyValue::ensureString($request['graph']);
		} else {
			throw new TConfigurationException('You must specify the type of the graph');
		}
 
		if ($request->contains('xdata')) {
			$this->xdata = explode( ',', TPropertyValue::ensureString($request['xdata']));
		} else {
			throw new TConfigurationException('You must specify the x data for the graph');
		}
 
		if ($request->contains('ydata1')) {
			$this->ydata1 = explode( ',', TPropertyValue::ensureString($request['ydata1']));
		} else {
			throw new TConfigurationException('You must specify the y data for the graph');
		}
 
		if ($request->contains('ydata2')) {
			$this->ydata2 = explode( ',', TPropertyValue::ensureString($request['ydata2']));
		}
 
		if ($request->contains('ytitle')) {
			$this->ytitle = TPropertyValue::ensureString($request['ytitle']);
		} else {
			throw new TConfigurationException('You must specify the y title for the graph.');
		}
	}
 
	public function getWidth() {
		return $this->width;
	}
	
	public function setWidth($value) {
		$this->width = TPropertyValue::ensureInteger($value);
	}
	
	public function getHeight() {
		return $this->height;
	}
	
	public function setHeight($value) {
		$this->height = TPropertyValue::ensureInteger($value);
	}
 
	public function getShadow() {
		return $this->shadow;
	}
	
	public function setShadow($value) {
		$this->shadow = TPropertyValue::ensureBoolean($value);
	}
 
	public function run() {
		switch( $this->type ) {
			case 1:
				$graph = $this->createStackedBarGraph($this->xdata, $this->ydata1, $this->ydata2, $this->ytitle);
			break;
 
			case 2:
				$graph = $this->createLineGraph($this->xdata, $this->ydata1, $this->ytitle);
			break;
		}
 
		// Send image to browser
		header("Content-type: image/png");
		imagepng($graph->Stroke());
		imagedestroy($graph);
	}
 
	private function createStackedBarGraph($xdata, $data1, $data2, $ytitle) {
		// Create the graph.
		$graph = new Graph($this->width, $this->height, "auto");
		$graph->SetScale("textlin");
		$graph->title->SetFont(FF_FONT1, FS_BOLD);
		$graph->SetFrame(false);
 
		if( $this->shadow )
			$graph->SetShadow();
 
		// Create the bar plots
		$b1plot = new BarPlot($data1);
		$b1plot->SetFillColor("khaki");
		$b1plot->value->Show();
		$b1plot->value->SetFormat('%d');
		$b1plot->value->SetColor("black");
		$b1plot->SetValuePos('center');
		$b1plot->SetLegend(Prado::localize('legend'));
 
		$b2plot = new BarPlot($data2);
		$b2plot->SetFillColor("orange");
		$b2plot->value->Show();
		$b2plot->value->SetFormat('%d');
		$b2plot->value->SetColor("black");
		$b2plot->SetValuePos('center');
		$b2plot->SetLegend(Prado::localize('legend'));
 
		// Create the stacked bar plot...
		$gbplot = new AccBarPlot(array($b1plot, $b2plot));
 
		// ... and add it to the graph
		$graph->Add($gbplot);
 
		$graph->xaxis->title->Set(Prado::localize('title'));
		$graph->xaxis->SetTickLabels($xdata);
		$graph->xaxis->title->SetFont(FF_FONT1, FS_BOLD);
 
		$graph->yaxis->title->Set(Prado::localize($ytitle));
		$graph->yaxis->title->SetFont(FF_FONT1, FS_BOLD);
		$graph->yaxis->SetLabelMargin(5);
		$graph->yaxis->scale->SetGrace(10);
		$graph->yaxis->HideZeroLabel();
		$graph->ygrid->SetFill(true,'#f2f2f2@0.5','#cacaca@0.5');
 
		return $graph;
	}
 
	private function createLineGraph($xdata, $data1, $ytitle) {
		// Create the graph.
		$graph = new Graph($this->width, $this->height, "auto");
		$graph->SetScale("textlin");
		$graph->title->SetFont(FF_FONT1, FS_BOLD);
		$graph->SetFrame(false);
 
		if( $this->shadow )
			$graph->SetShadow();
 
		// Create the line plot
		$lineplot = new LinePlot($data1);
		$lineplot->SetColor("orange");
		$lineplot->value->Show();
		$lineplot->value->SetFormat('%d');
		$lineplot->value->SetColor("black");
 
		// ... and add it to the graph
		$graph->Add($lineplot);
 
		$graph->xaxis->title->Set(Prado::localize('title'));
		$graph->xaxis->SetTickLabels($xdata);
		$graph->xaxis->title->SetFont(FF_FONT1, FS_BOLD);
 
		$graph->yaxis->title->Set(Prado::localize($ytitle));
		$graph->yaxis->title->SetFont(FF_FONT1, FS_BOLD);
		$graph->yaxis->SetLabelMargin(5);
		$graph->yaxis->scale->SetGrace(10);
		$graph->yaxis->HideZeroLabel();
		$graph->ygrid->SetFill(true,'#f2f2f2@0.5','#cacaca@0.5');
 
		return $graph;
	}
}
 
?>

(5) For a page on which you want to show a graph, first add a TImage control somewhere to the template:

<com:TImage ID="ProductsImage" />

(6) Add the following code to the corresponding class file:

<?php
/**
 * Page.php
 *
 * Copyright 2008 by Andreas Bulling
 * All rights reserved.
 * 
 * Terms of use and modification:
 * 
 * You may modify the following source code as you receive it, in any medium,
 * provided that you conspicuously and appropriately retain the above
 * original copyright notice.
 * 
 */
 
class Page extends BasePage {
 
	public function onLoad($param) {
		parent::onLoad($param);
 
		$this->generateProductsGraph();
	}
 
	private function generateProductsGraph() {
		$ydata1 = array();
		$ydata2 = array();
		$xdata = array();
 
		// Prepare array of x values
		$xValues = ...
		foreach( $xValues as $xValue ) {
			$xdata[] = $xValue;
		}
 
		// Prepare array of ydata1
		foreach( $xValues as $xValue ) {
			$products = GET_PRODUCTS_DEPENDING_ON_xValue();
			$ydata1[] = count($products);
		}
 
		// Prepare array of ydata2
		foreach( $xValues as $xValue ) {
			$products = GET_PRODUCTS_DEPENDING_ON_xValue();
			$ydata2[] = count($products);
		}
 
		$ydata1 = implode(',', $ydata1);
		$ydata2 = implode(',', $ydata2);
		$xdata = implode(',', $xdata);
		$this->ProductsImage->ImageUrl = $this->getRequest()->constructUrl('graph', 1, array( 'xdata' => $xdata, 'ydata1' => $ydata1, 'ydata2' => $ydata2, 'ytitle' => 'title'), false);
	}
}
?>