All You Need To Know To Create Charts Using CakePHP

One of the major reason developers are ignoring standard technology languages like PHP, is the issues faced with the vigor and scalability of the platform. CakePHP is one such robust open-source web framework which is stealing the limelight due to its MVC (model–view–controller) approach, styled on the lines of Ruby on Rails. Even though the framework is based on PHP, it follows a completely refreshed workflow, thereby making the process of development, even more simpler.

Rapid web development enabled by CakePHP

While Agile and Waterfall development approaches are popular amongst developers, the Rapid Application Development is gaining traction as it lays more emphasis on the processes involved rather than the planning. As such, it is an ideal approach for developing software that is driven by user interface requirements.

CakePHP is a relatively new framework that provides a reliable base for Rapid Application Development in PHP. The framework follows the MVC (Model-View-Controller) architecture, thereby giving developers a more robust platform for developing apps.

CakePHP supports automatic code generation using the console tool Bake, making it simpler for developers to develop web apps using Rapid Application Development. Additionally, the framework also supports dynamic scaffolding, which allows developers to define and create a primary application that can create, retrieve, update and delete objects. It also allows developers to define how objects are related to each other, and to develop and break those links.

In this tutorial, we will use a MongoDB database to store the data to render the chart.

Without much ado, let’s get started on how we can use the CakePHP Framework with FusionCharts for creating charts.

Components required to create charts in CakePHP:

  1. XAMPP (Server): We will use the XAMPP server for this tutorial. Although, you can use any other server that supports PHP and its frameworks like the MAMP server, the AMPPS server, etc. You can download XAMPP from here; it is available across all major platforms including Windows, OS X, and Linux.
  2. CakePHP Framework: CakePHP uses Composer as its package dependency manager. You can install CakePHP using the composer command given below:
    php composer.phar create-project --prefer-dist cakephp/app my_app_name
    Or if Composer is installed globally:
    composer self-update && composer create-project --prefer-dist cakephp/app my_app_name
    Read more about installing CakePHP and its packages.
  3. FusionCharts: You can download the latest version of FusionCharts Suite XT. Alternatively, you can also install it using the npm or bower package managers, using the commands given below:
    For npm:
    npm install fusioncharts
    npm install fusionmaps
    For Bower:
    bower install fusioncharts
    bower install fusionmaps
    FusionCharts also provides a dedicated PHP wrapper to create charts in PHP. [Download PHP Chart Wrapper]

The required environment is ready with the CakePHP skeleton application. Now, we will embed our chart in it.

Step 1. Setting up the virtual host:

In this step, we will define a virtual host for our application by adding the code given below in the httpd-vhost.conf file of our apache web server.

Once we have made the changes in our config file, we will save the file and restart the server. We will now start our CakePHP skeleton application using this [http://cakephp-tutorial.localhost] URL to verify, we are on right path.

Step 2. Connecting the my_app with the database:

After the successful installation, we will notice that cakePHP app is still not connected to the database. We need to modify the my_app\config\app.php file as shown below to establish the connection with the MySQL database.

Step 3. Embedding FusionCharts:

  1. PHP wrapper : Download the FusionCharts PHP wrapper and extract. Find the fusioncharts.php file and keep that file inside the folder.
  2. FusionCharts JavaScript file : We have already downloaded the FusionCharts Suite XT, simply extract the js file from there and keep that inside a folder named FusionCharts and keep that folder in my_app/webroot/js/fusioncharts as shown below –
  3. Open my_app/src/Template/Layout/default.ctp file, present in the CakePHP application, and add the js file to that as the format shown below –

Step 4. Setting up the Fusioncharts Controller:

Create the class FusionchartsController below in file src/Controller/FusionchartsController.php.

Step 5. Creating view for FusionchartsController:

Start by creating a directory called Fusioncharts under src/Template/Fusioncharts. Now create the file Fusionchart/index.ctp. This will contain the code required to render the chart.

Let’s create the file index.ctp inside src/Template/Fusioncharts, with the following contents:

Now we will render the chart by executing the view page created for the FusionchartsController, via the browser using this URL: http://cakephp-tutorial.localhost/fusioncharts

If you’ve followed all the steps , you should have a working chart as shown in the screenshot below:

how to create charts in cakephp

If you see any errors in your code, click here to view the complete source code of the sample project we have created for this tutorial.

Leave a Comment