How to use jqPlot in CakePHP

How to use jqPlot in CakePHP

jqPlot is a plotting and charting plugin for the jQuery JavaScript framework. jqPlot produces beautiful line, bar and pie charts with many features. What is more, it is an open source project which means you can use it for free. In this tutorial, we will learn how to setup jqPlot in CakePHP. The goal of this tutorial is to show a simple linechart using jqPlot in CakePHP, during this process, you should gain the idea of using jqPlot in CakePHP. Please note the purpose of this tutorial is not to implement complex charts using jqPlot, you should look into jqPlot official site for that. Let us get started!

Preparation

Download CakePHP, in this tutorial we are using CakePHP 1.3.2.
Download jqPlot from it official download page. in this tutorial we are using jquery.jqplot.1.0.0b2_r947.zip.
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 jqPlot files

Unzip downloaded jqPlot copy.
Copy and paste jquery.jqplot.min.css from "dist/jquery.jqplot.min.css" in unzip folder to CakePHP's directory "app/webroot/jquery.jqplot.min.css".
Copy and paste excanvas.min.js from "dist/excanvas.min.js" in unzip folder to CakePHP's directory "app/webroot/js/excanvas.min.js" accordingly.
Copy and paste jquery.min.js from "dist/jquery.min.js" in unzip folder to CakePHP's directory "app/webroot/js/jquery.min.js" accordingly.
Copy and paste jquery.jqplot.min.js from "dist/jquery.jqplot.min.js" in unzip folder to CakePHP's directory "app/webroot/js/jquery.jqplot.min.js" accordingly.

Setup controller

Create controller class at "app/controllers/jqplots_controller.php".

<?php
class JqplotsController extends AppController {
     public  $name = 'Jqplots';    
     public  $uses = null;                          //1
     public  $helpers = array('Javascript','Html'); //2
      
     public function index(){                       //3
        $this->layout='clean';                      //4
     }
      
 }
?>

It does not need a model for this tutorial, so set $uses value to be null.
It uses JavaScript and Html helpers to include JavaScript files and stylesheet, so set $helpers value to be array('Javascript','Html');
Create a function index for its view file.
It uses a layout file called "clean", which we will create next step. So set $this->layout value to be clean.

Setup layout file

As discussed above, we need a plain layout file for its view. Create a layout file at "app/views/layouts/default.ctp", and print the content of the view directly:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>
        <?php   echo __('Star Tutorial'); ?>
    </title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
    <!-- content -->
    <div id="content" >
        <?php echo $content_for_layout; ?>
    </div>
    <!-- end content -->
</body>
</html>

Setup view

Create view page at "app/views/jqplots/index.ctp", and copy code below into the file:

<!-- 1 -->
<!--[if lt IE 9]>                                          
<?php  echo $this->Javascript->link('excanvas.min.js');?>
<![endif]-->
 
<?php
echo $this->Javascript->link('jquery.min.js');
echo $this->Javascript->link('jquery.jqplot.min.js');
echo $this->Html->css('jquery.jqplot.min.css');
?>
 
<!-- 2 -->
<div id="chartdiv" style="height:400px;width:500px; margin:auto; "></div>
 
<!-- 3 -->
<script>
$(document).ready(function(){
    $.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]]);
});
</script>

Use Javascript and Html helpers to include those javascript files and css files we have copied on step 2.
Add a container where we want the plot to show up. Be sure to give your target a width and a height.
Create a plot when document is ready using Javascript.

The end

Now open your browser and type in "http://your-domain/jqplots", you should be able to see a chart created by jqPlot as below: jqplot with cakephp If you like our tutorial, please follow us on Twitter and help spread the word. We need your support to continue.

#How to use jqPlot in CakePHP

#Preparation

#Copy jqPlot files

#Setup controller

#Setup layout file

#Setup view