TailTemplate Build stunning websites faster with our pre-designed Tailwind CSS templates

How to use pChart in CakePHP

pChart is a PHP class oriented framework designed to create aliased charts. As we all know most of today’s chart libraries have a cost, but pChart is intended to be free according to its official site. This project is still under development and new features or fix are made every week. In this tutorial, we will learn how to setup pChart in CakePHP. The goal of this tutorial is to show a basic chart using pChart in CakePHP environment, during this process, you should gain the idea of using pChart in CakePHP. Please note the purpose of this tutorial is not to implement complex charts using pChart, you should look into pChart official site for that. Let us get started!

Preparation

  • Download CakePHP, in this tutorial we are using CakePHP 1.3.2.
  • Download pChart from it official download page. in this tutorial we are using pChart 1.27 - beta. And in download page, select pChart.1.27d.rar.
  • Setup CakePHP, make sure it can connect to your database and tmp folder writable. If you don't have the knowledge of setting up CakePHP, please refer to its official site at Cookbook.

Copy pChart files

  • Create a folder "pcharts" in CakePHP's vendor folder: app/vendors/pchart
  • Unzip downloaded pChart zip file (pChart.1.27d).
  • Copy and paste Font folder from "pChart.1.27d/Fonts" in unzip folder to CakePHP's vendor folder "app/vendors/pchart/Fonts".
  • Copy and paste pCache.class from "pChart.1.27d/pChart/pCache.class" in unzip folder to CakePHP's vendor folder"app/vendors/pchart/pCache.class".
  • Copy and paste pChart.class from "pChart.1.27d/pChart/pChart.class" in unzip folder to CakePHP's vendor folder"app/vendors/pchart/pChart.class".
  • Copy and paste pData.class from "pChart.1.27d/pChart/pData.class" in unzip folder to CakePHP's vendor folder"app/vendors/pchart/pData.class".

Setup controller

  • Create controller class at "app/controllers/pcharts_controller.php".
<?php
class PchartsController extends AppController {
     public  $name = 'Pcharts';
     //1   
     public  $uses = null;                                                         
     
      
     public function index(){      
         //2
         $this->autoRender = false;
          
         //3                                               
         App::import('Vendor','pData', array('file' =>'pchart'.DS.'pData.class')); 
         App::import('Vendor','pChart', array('file' =>'pchart'.DS.'pChart.class'));
          
         //4
         $fontFolder = APP.'vendors'.DS.'pchart'.DS.'Fonts';                       
          
         //5
         // Dataset definition
         $DataSet = new pData;
         $DataSet->AddPoint(array(1,4,3,2,3,3,2,1,0,7,4,3,2,3,3,5,1,0,7));
         $DataSet->AddSerie();
         $DataSet->SetSerieName("Sample data","Serie1");
         
         // Initialise the graph
         $Test = new pChart(700,230);
         $Test->setFontProperties($fontFolder.DS."tahoma.ttf",10);
         $Test->setGraphArea(40,30,680,200);
         $Test->drawGraphArea(252,252,252,TRUE);
         $Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,2);
         $Test->drawGrid(4,TRUE,230,230,230,70);
         
         // Draw the line graph
         $Test->drawLineGraph($DataSet->GetData(),$DataSet->GetDataDescription());
         $Test->drawPlotGraph($DataSet->GetData(),$DataSet->GetDataDescription(),3,2,255,255,255);
         
         // Finish the graph
         $Test->setFontProperties($fontFolder.DS."tahoma.ttf",8);
         $Test->drawLegend(45,35,$DataSet->GetDataDescription(),255,255,255);
         $Test->setFontProperties($fontFolder.DS."tahoma.ttf",10);
         $Test->drawTitle(60,22,"My pretty graph",50,50,50,585);
         $Test->Stroke();
     } 
      
 }
?>
  1. It does not need a model for this tutorial, so set $uses value to be null.
  2. Because pChart has a function to output the image to the browse and set its content type accordingly, we do not need to set up any layout and view file for this action. We set $autoRender value to be false.
  3. Use App class to import class files into this action. Take note how we specify pData.class and pChart.class file path. Because pData and pChart are not using standard ".php" extension for its file names, we have to specify its files path when using App::import function.
  4. We set font folder directory using CakePHP's build-in constants. And in the following code, we will use $fontFolder variable to set font files.
  5. Below is standard pChart's basic functions, the only note you need to take is how we use $fontFolder variable to apply font's directory. If you want to find out more about each function, please refer to its official site.

The end

Now open your browser and type in "http://your-domain/pcharts", you should be able to see a chart created by pChart as below: pchart with cakephp If you like our tutorial, please follow us on Twitter and help spread the word. We need your support to continue. If you have questions or find our mistakes in above tutorial, do leave a comment below to let us know.