Categories: Tutorials

Creating Charts with Zend Framework and FusionCharts

In our endeavor to make data visualization as simple and as interesting as possible, we bring to you a two-part post on creating charts using Zend Framework 3 and FusionCharts. This first post talks about creating JavaScript charts using Zend and FusionCharts using static data. Here, we will explain everything from the installation of Zend Framework and FusionCharts to the rendering and displaying of the chart in the web browser. Once you have completed this tutorial successfully, you can move on to the second part of the tutorial where we will talk about rendering charts in Zend Framework 3 using Fusioncharts with the database connectivity.

Table of Contents

Overview

Introduction to Zend Framework
Introduction to Fusioncharts
Installing Zend Framework 3 and setting up your Project
Setting up the virtual host
Installing Fusioncharts
Creating a static chart 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:

$ composer create-project -s dev zendframework/skeleton-application path/to/install

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:

$ composer require "name of the dependency you want"

First, it will prompt:

$ Do you want a minimal install (no optional packages)? Y/n

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:

$composer self-update
$composer install

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/):

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:

Open C:\WINDOWS\system32\drivers\etc\hosts in Notepad or a script editor. Look for the following line at the bottom:
```
127.0.0.1   localhost
```
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:
```
127.0.0.1   zend_local
```
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):
```
#Virtual hosts
#Include conf/extra/httpd-vhosts.conf
```
Remove the # from the beginning of the second line so the section now looks like this:
```
#Virtual hosts
Include conf/extra/httpd-vhosts.conf
```
Save httpd.conf and close it.
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.

Add a new virtual host in the vhost.conf.

    ServerAdmin webmaster@dummy.com
    DocumentRoot "C:/xampp/htdocs/zend_fusioncharts/public"
    ServerName zend_local
    ErrorLog "logs/dummy-host2.example.com-error.log"
    CustomLog "logs/dummy-host2.example.com-access.log" common

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

For Linux (LAMP)

Open your terminal and go to /etc/apache2/sites-available/
```
$ cd /etc/apache2/sites-available/
```

Copy the default config (000-default.conf)

$ sudo cp 000-default.conf zend_local.conf

Open the new config file that you have created in step 3 and edit it to add the following code:

    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/skeleton/public
    ServerName zend_local
    SetEnv APPLICATION_ENV "development"

    
     DirectoryIndex index.php
     AllowOverride All
     Require all granted
 

    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined

After you’ve saved all the changes , it should look something like the image given below:

Run the following command
```
$ sudo a2ensite example.com.conf
```
Now open the hosts file in /etc/ and add the hostname for the website
```
$ 127.0.0.1 zend_local
```
Save all the changes and restart the apache server using the command given below:
```
$ sudo service apache2 restart
```

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 :

npm install fusioncharts
npm install fusionmaps

For Bower:

bower install fusioncharts
bower install fusionmaps

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

Now create a folder named fusioncharts in the public folder of your project.
Copy all the files from the js folder of the Fusioncharts XT Suite to the fusioncharts folder in the public directory of your project
Download the FusionCharts PHP wrapper to create charts in PHP. You can download it from here.
After the download is complete and you have extracted all the files copy the fusioncharts.php file.
Create a folder Lib in the vendor directory of your project and paste the fusioncharts.php file in the Lib folder.
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:
```
headscript()
->prependFile($this->basePath(‘fusioncharts/fusioncharts.js’))
?>
```

This completes the installation of FusionCharts.

Step 4: Creating a static chart using Fusioncharts

Setting up the Fusioncharts module

Zend-mvc uses a module system to organise your main application-specific code within each module. The Application module provided by the skeleton is used to provide bootstrapping, error, and routing configuration to the whole application.We are going to put all our code into the Fusioncharts module which will contain our controllers, models, forms and views, along with configuration. Start by creating a directory called Fusioncharts under the module directory with the following sub-directories to hold the module’s files:

Next, we’ll create the Module.php file, with the following contents:

// zend_fusioncharts/module/Fusioncharts/src/Module.php

Autoloading of the Module

While Zend Framework provides auto-loading capabilities via its zend-loader component, we recommend using Composer’s auto-loading capabilities. Open composer.json in your project root and look for the autoload section; it should look like the following by default:

"autoload": {
    "psr-4": {
        "Application\\": "module/Application/src/"
    }
},

We’ll now add our new module to the above. So, it now reads:

"autoload": {
    "psr-4": {
        "Application\\": "module/Application/src/",
        "Fusioncharts\\": "module/Fusioncharts/src/"
    }
},

Once this list is updated and you have executed the command below , it will create a new set of namespaces for those written in the autoload section of the composer.json. Once you’ve added the new module, run the following command to ensure that the Composer updates its auto-loading rules:

$ composer dump-autoload

Configure the Fusioncharts Module

The config information is passed to the relevant components by the ServiceManager. We need two initial sections: controllers and view_manager. The controllers section provides a list of all the controllers provided by the module. Within the view_manager section, we add our view directory to the TemplatePathStack configuration. This will allow it to find the view scripts for the Fusioncharts module that are stored in our view/ directory. Create a file (if not created before) called module.config.php under the zend_fusioncharts/module/Fusioncharts/config/ folder and add the code given below:

namespace Fusioncharts;

use Zend\ServiceManager\Factory\InvokableFactory;

return [
    'controllers' => [
        'factories' => [
            Controller\FusionchartsController::class => InvokableFactory::class,
        ],
    ],
    'view_manager' => [
        'template_path_stack' => [
            'Fusioncharts' => __DIR__ . '/../view',
        ],
    ],
];

Informing the application about our new module

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

return [
    'Zend\Form',
    'Zend\Db',
    'Zend\Router',
    'Zend\Validator',
    'Application',
    'Fusioncharts',         
];

Note: `Fusioncharts` has been added to the above code

Initializing Routes

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, open and edit the file module.config.php in the config folder of your module(Fusioncharts) Zend_Fusioncharts/modules/Fusioncharts/config/.

namespace Fusioncharts;

use Zend\Router\Http\Segment;
use Zend\ServiceManager\Factory\InvokableFactory;

return [
    'controllers' => [
        'factories' => [
            Controller\FusionchartsController::class => InvokableFactory::class,
        ],
    ],

    // The following section is new and should be added to your file:
    'router' => [
        'routes' => [
            'fusioncharts' => [
                'type'    => Segment::class,
                'options' => [
                    'route' => '/fusioncharts[/:action[/:id]]',
                    'constraints' => [
                        'action' => '[a-zA-Z][a-zA-Z0-9_-]*',
                        'id'     => '[0-9]+',
                    ],
                    'defaults' => [
                        'controller' => Controller\FusionchartsController::class,
                        'action'     => 'index',
                    ],
                ],
            ],
        ],
    ],

    'view_manager' => [
        'template_path_stack' => [
            'fusioncharts' => __DIR__ . '/../view',
        ],
    ],
];

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:

 __ServerName__/fusioncharts/index or __ServerName__/fusioncharts/index
 public function indexAction()
 {   
 }
?>

Initialising 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; any variables or view models that are returned from the controller action method will be passed to this file. So now create a file called index.phtml in the modules/Fusioncharts/view/fusioncharts/fusioncharts/ directory and add the following code to it:

render();
         
?>
Fusion Charts will render here

When you now go to url https://zend_local/fusioncharts/, you should see the following output:

Conclusion

This was the complete step-by-step process for creating a chart using the Zend Framework with FusionCharts, using static data. Once the above tutorial is complete you can successfully move onto the next part, which talks about creating charts using Zend and Fusioncharts with database connectivity.

Dishank Tiwari