FusionCharts Suite XT includes a wide plethora of charts that ease the process of data visualization tremendously. Another plus with this suite is that the JavaScript-based charts use the simple XML and JSON data formats for feeding data.

FusionCharts Suite XT can be also used with a number of server-side and client-side technologies, allowing developers to work with the technology of their choice.

This article introduces another new dimension to using the suite—creating charts from the FusionCharts library using JavaServer Faces.

JavaServer Faces is a Java specification or a framework for building component-based user interfaces for web applications. The Javaserver Faces API is designed to simplify the development of the user interface for a web application. FusionCharts Suite XT can also be rendered in a JSF page using the Java Wrapper.

Let’s now get started with the requirements and the steps for using FusionCharts using JavaServer Faces.

Set Up The Requirements

To get the code (for creating charts) in this blog working, we need to first download the following components on our local machine:

Creating a Basic Chart

By following the steps in this article, we will create an area chart which will showcase the sales of liquor in a store for each day of a week. The sales figures will be plotted along the y-axis and the days will be plotted along the x-axis.

To create a basic chart, we first need to create a chart object. Follow the steps mentioned below and you’ll be done with the creation of chart object.

Step 1: Create a Java class in your project. The created class will return the entire FusionCharts structure that gets rendered in an xhtml page.

Note: Include the FusionCharts.java file in the same folder where you have created the above java class. If you have placed the FusionCharts java wrapper inside a different package, import it into the Java class.

Step 2: Create an xhtml page that will render the required chart in the browser.

Finally, include the library files. Create a folder, resources under root folder of your local machine. Within the resources folder, create another folder, js. Include the JavaScript files inside the js folder.

The folder structure looks as shown below:

folder structure

Viewing the Chart

Now, as you are done with all the steps needed to render a chart, simply run the .xhtml file to render the chart.

The output looks as shown below:

sc6

If you find any difficulty in rendering the chart or you see any error in your code, click here to download the complete source code of the sample project we have created for this tutorial.

Was There a Problem Rendering Charts?

In case something went wrong and you are unable to see the chart, check for the following:

  • The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.
  • If the chart does not show up at all, check if the fusioncharts.js and fusioncharts wrapper FusionCharts.java was loaded. Also, check if the path to fusioncharts.js and FusionCharts.java file is correct, and whether the file exists in that location.

Creating Charts using JSP and MongoDB

FusionCharts offers a set of JavaScript charts that use simple XML and JSON formats to feed data to the graphs. FusionCharts provides a large variety of different types of charts that you can use in your demos.

JSP is one of the most widely used technologies that help software developers create dynamically generated web pages. While we already have detailed documentation on how JSP can be easily integrated with FusionCharts using the FusionCharts-JSP wrapper, this article talks about how you can use the MongoDB database along with FusionCharts and JSP for rendering charts.

MongoDB, one of the most popular document-oriented databases, that also stores data records as documents, which helps in handling big data and provides high scalability and performance. In this article, we’ll explore how to integrate JSP with MongoDB and create a chart using FusionCharts. We choose MongoDB over others because it is an open-source and document-oriented. It works on the concept of document and collections, stored data in the JSON format and can also vary in structure as per the requirement.

Now, as we have covered the basics sufficiently, let’s get started with the steps to create charts using JSP and MongoDB…

To get the code (for creating charts) in this blog working, we need to first install the following components:

Make sure that all the above mentioned components have been downloaded in your system.

To setup MongoDB on your operating system, please refer to the documentation here.

Next, we move on to how you can configure MongoDB and create a database

Only three steps and we will be done with the database part!

To know how you can set up MongoDb on your OS, refer to the documentation here.

Step 1: Create a json file that contains the data that goes into the database and will be used as the source data for the chart. We’ll name this file as country.json.

Step 2: Import the .json file created in Step 1 into mongodb using the “mongoimport” command as shown below.

import

Step 3: Next, open another shell to run the “mongo” command.

mongo

Step 4: Now we need to verify if our data has been imported correctly into the database or no. To do this, you need to execute the following commands:

  • Use the “show dbs” command to see your database. A list of the databases present is shown.
  • From this list, select the required database using the “use ” command.
  • Next, use the “show collections” command to see the collections inside your database.
  • For seeing the contents of a specific collection, execute the “db..find().pretty()” command.

population

You can import this demo database from here.

With this, we are done with creating the database.

Now we move on to creating chart objects and then finally rendering the chart.

Step 1: Create a JSP page and import all the packages in a script tag.

The code below imports the com.google.gson package that enables the conversion from JSON to Java and Java to JSON. Before getting into the code, let’s first talk about the google-gson library.

The google-gson library:

  • Provides the toJson() and fromJson() methods for converting Java objects to JSON and the other way round
  • Allows conversion of the already existing unmodifiable objects to and from JSON
  • Supports Java Generics extensively
  • Allows custom representations of objects
  • Supports arbitrarily complex objects (with deep inheritance hierarchies and extensive use of generic types)

Now, here is the code to import the com.google.gson package:

Click here for more information on google-gson package.

Step 2: Establish database connectivity to fetch values from the database and place them inside a hashmap, as shown in the code snippet below.

Once the database connectivity is established, structure your data in the Fusioncharts format and convert the java objects to their JSON representation using the GSON library.

Step 3: Finally, create a constructor and pass the necessary parameters to render the chart.

Given below is the full JSP code of the example we worked on:

Finally, simply run your JSP file using MongoDB.

You output looks like as shown below:

sc1

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

Was There a Problem Rendering Charts?

In case something went wrong and you are unable to see the chart, check for the following:

  • The chart ID should be unique for each chart rendered on the same page. Otherwise, it will result in a JavaScript error.
  • If the chart does not show up at all, check if the fusioncharts.js and fusioncharts wrapper FusionCharts.java was loaded. Also, check if the path to fusioncharts.js and FusionCharts.java file is correct, and whether the file exists in that location.

Drupal is a content management software with a lot of useful and powerful features, like easy content authoring, reliable performance, and excellent security. The flexibility and modularity of Drupal is what gives the extra edge as a content management software. Its tools help us to build the versatile, structured content that dynamic web experiences need.

It is designed to be the perfect content management solution for admins and moderators, who needs both simplicity and flexibility. It accomplishes this through its modular approach to site building.

For more details about drupal, click here.

In this article, you will see how to use FusionCharts in combination with Drupal to create an interactive analytic dashboard. Let’s now move on to how you can create the perfect dashboard using FusionCharts and Drupal. Following are some of the use cases for different kinds of users:

  • Admins: To analyze traffic on website, and how the content is working
  • Moderators: To see how their content is working, views on pages, articles, etc

To get the code in this blog working, we need to install the following components:

  • Xampp: We are going to use the XAMPP server for this tutorial. 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.
  • 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:
    1. For npm:
    2. For Bower:
  • Drupal: Download drupal and keep the extracted file in xampp/htdocs folder as shown in the image below:

    file_loc

    Inside the drupal folder, go through the path drupal\sites\default and duplicate the default.settings.php file and rename that duplicate file as settings.php.

    Once done, create a new folder called files and keep that inside the default folder.

    model

Now install the drupal using localhost.
Eg. http://localhost/drupal/

Install drupal by connecting the database. For detailed installation process click here.

After installing drupal, login to the site. Once you login successfully the drupal Welcome page will appear as shown below:

welcome_page

Click Structure in the admin bar, which provides several options as shown in the image below:

structure1

Click on Blocks

block

The Add block option appears. Click Add block to create the block for your dashboard.

block title

*Fill the required fields, i.e. Block title and Block description.

After filling up the details, check the Block body which contains the code for the chart.

P.S- We have used FusionCharts Suite XT, PHP, and MySQL to create the dynamic charts for the dashboard.

Keep the data table required for the dashboard inside the database, to connect drupal at the time of installation.

database

The first part of the php code, helps you to connect with the database required for the dashboard.

Extract files from the downloaded FusionCharts Suite XT and keep the fusioncharts.js and fusioncharts.charts.js file inside a folder and keep that folder inside the directory called modules inside the drupal folder.
e.g. C:\xampp\htdocs\drupal\modules\lib

lib

Similarly, keep the fusioncharts.theme.fint.js inside the directory called themes inside the drupal folder.

theme

In the second part of PHP code, include the paths of library files fusioncharts.js, fusioncharts.charts.js and fusioncharts.theme.fint.js using the drupal_add_js() function as shown below(Include these files inside any one block, the entire page will be able to use these script files, i.e. no need to add these files inside every block.).

Download the fusioncharts php wrapper and keep the fusioncharts.php file inside modules/php folder.

php_module

Include the fusioncharts.php inside the php.module code.

phpCode

Once the FusionCharts php wrapper is included let’s get back to the code. Inside php tag, using sql query, fetch the data from the database.

Achieve the required json format using php,to render the chart.

Finally define the div where the chart will render.
i.e.

Keep this code inside Block body.

body

Select the text format as php code. [ If this option doesn’t appear click on Modules. Scroll down to the PHP filter module and check the Enabled box.

module

Press the Save Configuration button

saveConfig

Now, again scroll down to the PHP filter module where two links have been added. The first is help. It’s not long and is worth reading, so check it out. The second link is permissions. Click on this to go to the Permissions page.

help_permissions

Scroll down to the Filter section. There is a new item called Use the PHP code text format and its checkbox for the Administrator is not checked. The permission box must be checked for the role that needs to use PHP code in order for the PHP filter to show on input boxes.

filter

Finally click on Save permissions.

savePermissions2

Inside the REGION SETTINGS, specify in which themes and regions this block is going to be displayed.

format and region

Once done save the block. Similarly construct other blocks and render the chart inside the block body, which are required for the dashboard.

Here is the snapshot of the final; dashboard.

dashboard

Perfect isn’t it?

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

Create Charts using PHP and MongoDB

PHP is one of the most widely used server side languages. We’ve already got detailed documentation on how PHP can be easily integrated with FusionCharts using the FusionCharts-PHP wrapper. We also had a recent blog post on how you can use the Zend Framework (a cluster of PHP packages) with FusionCharts.

PHP is fairly easy to work with, w.r.t its support for many database technologies. However, there is some work involved when using PHP with a NoSQL database.

However, before we move to talking about that, it is important that we brush up on what is NoSQL, for there will be many of us who aren’t familiar with this database technology.

Let’s first talk about:

  • What is NoSQL?
  • Why people use NoSQL?

Here goes the answers…

NoSQL also referred to as ‘NOT ONLY SQL’ or ‘non relational’ database, provides a data storage and retrieval mechanism that is modeled differently from the traditional tabular relations that are used in relational databases. NoSQL is used because it encompasses a wide variety of different database technologies that were developed in response to the demands presented in building modern applications. Top NoSQL databases used today include MongoDB, Redis, Cassandra, CouchDB HBase, Neo4j, and so on.

In this blog post, we’ll explore how to integrate PHP with MongoDB and create a chart using FusionCharts. MongoDB is an open-source, document-oriented database developed by MongoDB Inc. It works on the concept of document and collections, stores data in the JSON format, and can vary in structure as per the requirement. Query access is fast through the MongoDB Query Language. It uses dynamic schemas, meaning that you can create records without first defining the structure, such as the fields or the type of values.

Now that we have the basics sufficiently covered, let’s get started…

To get the code in this blog working, we need to install the following components:

Make sure that all the above mentioned components are present in the system and are working as expected.

Next, we move on to how you can create the database

Step 1: Execute the command “mongod” using the shell to run the mongodb server.

mongod

Step 2: Create a json file that contains the data that goes into the database and will used as the source data for the chart. We’ll name this file as fuel_price.json.

Step 3: Import the .json file created in Step 2 into mongodb using the command shown below.

mongoimport -d database_name -c collection_name –type json –file complete path for the json file –jsonArray

importData

Step 4: Next, open another shell to run the command “mongo”.

mongo

Now we need to verify if our data has been imported correctly into the database or no. To do this, you need to execute the following commands:

  • Use the “show dbs” command to see your database. A list of the databases present is shown.
  • From this list, select the required database using the “use database_name” command.
  • Next, use the “show collections” command, which shows the collections inside your database.
  • For seeing the contents of a specific collection, execute the “db.collection_name.find()” command .

mongoDatabase

With this, we are done with creating the database.

Now lets move to the coding part that is a three-step process with, multiple sub-steps.

STEP I (Configuration)

Create a file and save it as config.php inside the project folder.

  • Include the ‘autoload.php’ file that is required for using mongodb with php.
  • Next, we need to create the connection between php and mongoDB.

After completion of the configuration, the php code will look like this.

STEP II

  • Extract the FusionCharts Suite XT zip and keep all the script files in a new folder inside the project folder, as shown below. Here, we have named the new folder as fusioncharts.
  • fcLib

  • Extract the fusioncharts PHP wrapper and keep the fusioncharts.php file inside the same folder created in the previous step for keeping the script files (for our example, fusioncharts).

STEP III (Main Page)

  • Create a file multiseries_mongodb.php, because we will be creating a multi-series chart using mongodb. Include the config.php file inside this file, using the command shown below:
  • Include the ‘fusioncharts.php’ file that contains functions to embed fusioncharts in php.
  • Add the fusioncharts script file.
  • Retrieve data from the database: Include the php code within the body tag. First, retrieve the data from the database and store it in a variable. Here we are storing the data in a variable called $myObj.

    Here chartData is the collection name in the database myProject.
  • Form an associative array: As $myObj is a mongo cursor, we need to convert it to an associative array.

    Thereafter, sort the associative array in an ascending order (if required).
  • Next, we will create an array that will contain the dataset—the chart attributes and the data—fetched from the database.
  • The associative array created in the above step will now have to be encoded into a json format that is required to render the chart.
  • Now, we create the chart object and render the chart using render() function.
  • Next, we close the php tag and continue with the html part by defining the dom element, where the chart will render.
  • Finally, execute the php code using any browser.
    eg. http://localhost/phpMongodb/multiSeries_mongodb.php

    Your output should be like the image shown below:

msLineChart

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

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.

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.

Overview

  1. Introduction to Zend Framework
  2. Introduction to Fusioncharts
  3. Installing Zend Framework 3 and setting up your Project
  4. Setting up the virtual host
  5. Installing Fusioncharts
  6. 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:

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

structure

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

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:

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

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:

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:

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.

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/.

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:

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:

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

final_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.