Creating Charts with Zend Framework 3 and FusionCharts using Database

In this tutorial, we will be creating JavaScript charts using Zend and FusionCharts using database connectivity. Here we will explain everything from installation to the database connectivity, rendering and displaying of the chart in the web browser.

Before you move on with this tutorial make sure that you have completed the Part 1(building a static chart using Zend and FusionCharts) of this tutorial series.

Overview

  1. Introduction to Zend Framework
  2. Introduction to Fusioncharts
  3. Installing Zend Framework 3 and Setting up the your Project
  4. Setting up the virtual host
  5. Installing Fusioncharts
  6. Creating a chart with database using Fusioncharts

Prerequisites

Before you move forward with the tutorial you should have a basic understanding of how things work in Zend Framework. Click here to get detailed description about the Zend Framework 3.

Introduction to Zend Framework

Zend Framework is a cluster of professional PHP packages that can be used to develop web applications and services using PHP 5.6+. It provides 100% object oriented code using a broad spectrum of language features.

Introduction to Fusioncharts

FusionCharts is a comprehensive JavaScript charting library packed with simple and complex charts (like the column and bar charts, pie and doughnut charts, treemap, heatmap, logarithmic charts), gauges and widgets (like the angular gauge, bulb gauge, thermometer gauge, and funnel and pyramid charts), and maps (for all continents, major countries, and all US states)..

Let’s now get started with the steps for creating a chart with static data using Zend Framework and FusionCharts.

Step 1: Installing Zend Framework 3 and setting up the project

In order to build our application, we will start with the ZendSkeletonApplication available on github. Use Composer to create a new project from scratch, as shown below:

This will install an initial set of dependencies, which includes:

  • zend-component-installer, which helps automate the injection of component configuration into your application
  • zend-mvc, which is the kernel for MVC applications

It will ask you a couple of questions which will be regarding the support provided by Zend. You can do y(yes) to all the questions or you may acquire them later by simple command:

First, it will prompt:

If you answer with a “Y”, or press enter with no selection, the installer will not raise any additional prompts and finish installing your application. If you answer “n”, it will continue (for about ten questions) to prompt you with questions.

Now you can see that there is a skeleton-application folder created in the path you have specified in the above command. Now you can change the folder name to anything you want , in our case we have renamed the directory skeleton-application to zend_fusioncharts.

Once done, go inside the directory that you have set above (In our case the zend_fusioncharts ) and run the following command to install all the dependencies:

Now the project is completely set. If you’ve followed all the steps correctly, you should see the following output if you traverse to the public folder of your project (localhost/zend_fusioncharts/public/):

zend

Step 2: Setting up the virtual host

For this project, we are using the Apache Web Server. You can download the Apache web server from here.

Here’s how you can set up the virtual-host for your project:

For Windows users:

  1. Open C:\WINDOWS\system32\drivers\etc\hosts in Notepad or a script editor. Look for the following line at the bottom:
  2. On a separate line, enter 127.0.0.1, followed by tab space and the name of the virtual host you want to register. For instance, to set up a virtual host called zend_local, enter the following:
  3. Open httpd.conf, the main Apache configuration file, in a text editor. It is in the Apache conf folder. If you’re using XAMPP, the file is located at C:\xampp\apache\conf\httpd.conf. Scroll down to the Supplemental configuration section at the end, and locate the following section (approximately line no. 500):
  4. Remove the # from the beginning of the second line so the section now looks like this:
  5. Save httpd.conf and close it.
  6. Open the extra\httpd-vhosts.conf file in Notepad or a text editor. If you’re using XAMPP, the location is C:\xampp\apache\conf\extra\httpd-vhosts.conf.
  7. Add a new virtual host in the vhost.conf.
  8. The main section looks like this:

    window

  9. Save the changes made in step 7 httpd-vhosts.conf, and restart Apache.
  10. Now you can load your project by writing http://zend_local/ in the browser.

For Linux (LAMP)

  1. Open your terminal and go to /etc/apache2/sites-available/
  2. Copy the default config (000-default.conf)
  3. Open the new config file that you have created in step 3 and edit it to add the following code:

    After you’ve saved all the changes , it should look something like the image given below:
    linux
  4. Run the following command
  5. Now open the hosts file in /etc/ and add the hostname for the website
  6. Save all the changes and restart the apache server using the command given below:

Step 3: Installing Fusioncharts

You can download the latest version of FusionCharts Suite XT from here. Alternately, you can also install it using the npm or bower package managers, using the commands given below:

For npm :

For Bower:

Once you have successfully downloaded the FusionCharts Suite XT execute the steps given below to add the FusionCharts library to your project:

  1. Now create a folder named fusioncharts in the public folder of your project.
  2. Copy all the files from the js folder of the Fusioncharts XT Suite to the fusioncharts folder in the public directory of your project
  3. Download the FusionCharts PHP wrapper to create charts in PHP. You can download it from here.
  4. After the download is complete and you have extracted all the files copy the fusioncharts.php file.
  5. Create a folder Lib in the vendor directory of your project and paste the fusioncharts.php file in the Lib folder.
  6. Open a file called layout.phtml (layout.phtml is a default template provided by Zend) in modules / Application / view / layout / and add the following lines of code after the other script tags:

This completes the installation of FusionCharts.

Step 4: Setting up the Database

Open the file global.php and in the zend_fusioncharts/config/ and add these lines of code:

Create a new file called local.php in zend_fusioncharts/config/ and add the following code to it:

Now create a table and insert the following data in the Mysql database.

Step 5: Creating a chart using Fusioncharts

Setting up the Fusioncharts module

Start by creating a directory called Fusioncharts under module with the following sub-directories to hold the module’s files:

structure

Let’s create Module.php file now, with the following contents:

Autoloading

Open composer.json in your project root, and look for the autoload section; it should look like the following by default:

We’ll now add our new module to the list, so it now reads:

Once you’ve made that change, run the following to ensure Composer updates its autoloading rules:

Configuration

Create a file called module.config.php under zend_fusioncharts/module/Fusioncharts/config/:

Informing the application about our new module

We now need to tell the ModuleManager that this new module exists. This is done in the application’s config/modules.config.php file which is provided by the skeleton application.

Note: Fusioncharts has been added to the above code

Routing and controllers

The mapping of a URL to a particular action is done using routes that are defined in the module’s module.config.php file.
So now update the file module.config.php in the config folder of your module.

Creating the controller

We are now ready to set up our controller.

For zend-mvc, the controller is a class that is generally called {Controller name}Controller; note that the controller’s name must start with a capital letter. The controller class lives in a file called {Controller name}Controller.php within the Controller subdirectory for the module; in our case it is module/Fusioncharts/src/Controller/. Each action is a public method within the controller class that is named as {action name}Action, where {action name} should start with a lowercase letter.

Next, to use Fusioncharts in that Controller you need to include the fusioncharts.php wrapper in this file.

Let’s go ahead and create our controller class in the file zend_fusioncharts/module/Fusioncharts/src/Controller/FusionchartsController.php:

Setting up the Model

Let’s start by creating a file called Fusioncharts.php under the directory module/Fusioncharts/src/Model and populate it with the code given below:

Next, create a file called FusionchartsTable.php under the module/Fusioncharts/src/Model directory and populate it with the code given below:

Initialise the view scripts

To integrate the view into our application, we need to create some view script files. These files will be executed by the DefaultViewStrategy and will be passed any variables or view models that are returned from the controller action method.

So now create a file called db.phtml in modules/Fusioncharts/view/fusioncharts/fusioncharts/db.phtml
And add the following code:

After this is done you are good to go this url http://zend_local/fusioncharts/db you’ll get :

screenshot

Conclusion

This was the complete step-by-step process for creating a chart using the Zend Framework with FusionCharts, using database. If you have completed the tutorial and want to recall the same steps of creating charts using static data, you can move on to the first part, which talks about creating charts using Zend and Fusioncharts with static data.

Leave a Comment