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.

In this tutorial, we will be creating JavaScript charts using Zend and FusionCharts.

FusionCharts is a comprehensive JavaScript charting library packed with 90+ charts and 1000+ maps.

One chart type can’t be used for visualising all types of data. FusionCharts offers a wide range of charts to choose from, depending on the type of data to be plotted and the type of analysis to be done. The package includes basic charts like the column chart, pie chart, doughnut chart, and so on; domain-specific power charts like the logarithmic charts, spline charts, error charts, and so on; gauges and widgets like the angular gauge, bulb gauge, thermometer gauge, and funnel and pyramid charts, and so on; and maps for all continents, major countries, and all US states.

FusionCharts works well across all browsers (including older ones like IE6) and has some pretty cool and useful features like client-side image export, events, themes, annotations, etc.

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

We’ll first list down the components that we need for creating charts. Here’s what we’ll require:

  1. XAMPP (Server): 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.
  2. Zend Framework: Zend uses Composer as its package dependency manager. You can install Zend using the composer command given below:

    Note:To know more about installing Zend and its packages, click here.
  3. 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:

    FusionCharts also provides a dedicated PHP wrapper to create charts in PHP. You can download it from here.

Now, as we have our environment ready, let’s create a Zend skeleton application in which we will embed our chart. For this, we will use the Composer command given below:

This command will install an initial set of dependencies needed for our application and we can now start configuring our application using the steps given below.

Click here to read more about the skeleton application and details on how you can create one.

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.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 zend skeleton application using this URL to verify we are on right path.

Step 2: Creating the PHP file

In this step, we will create a new PHP file, which will include our chart object. First, we will include the FusionCharts PHP wrapper in our file using the code given below:

Next, we will include the FusionCharts package JavaScript files and chart container, which will be a HTML div element in the HTML code in our PHP file.

Next, we will create a chart object using the FusionCharts PHP wrapper class and append it in our PHP file.

To know more about creating the chart object, you can check out this developer documentation page on the FusionCharts website.

We have now created our PHP file that we will place inside the public folder of our server.

Step 3: Executing the PHP file

 In this step, we will render the chart we created by executing the PHP file created in step 2 via the browser using this URL:


Where phpFileName is the name of the file you created; in our example,  this will be columnChart_json.php.

If you’ve followed all the directions given above properly, you should have a working chart as shown in the screenshot below:












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

If you are ever stuck or have any questions, feel free to drop a line at support@fusioncharts.com. Happy to help!

Wikipedia defines dashboards as easy-to-read, often single page, real-time user interfaces, showing a graphical representation of the current status and the historical trends of an organization’s key performance indicators to enable instantaneous and informed decisions to be made at a glance.

If you are somebody who works with dashboards and information systems regularly, you’d know that at a glance is the keyword here and a pretty crucial one at that—considering the number of devices with different screen resolutions that are available and are increasingly being used for browsing.  This mandates adopting responsive web design.

FusionCharts suggests a solution for creating responsive dashboards that is as simple as it gets.

Read on to know how.

The Problem at Hand

In today’s day and age, browsing web pages is not restricted to just through desktops—smartphones and tablets have caught up. However, if the layout of a website/application is not responsive, browsing on a device smaller than the conventional desktop often needs a lot of re-sizing. Consequently, users find it difficult to navigate through and comprehend the data on the screen.

In case of dashboards, it is important that all the information showcased fits within one screen; the use of a scroll should be as minimal as possible. Earlier designers could create separate web pages that could be rendered on mobile phones. However, with the present range of devices that users can use to access data, designing something that is consistent across resolutions of different kind of devices is a cumbersome task.

As a result, the viewing experience of a user and the productivity of the organization suffer.

The Solution

FusionCharts Suite XT is a front-end, JavaScript-based charting library. It is a comprehensive collection of 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). All charts in the suite are responsive and can be extensively used to create dashboards for showcasing data across different functions and domains, including Finance, Sales, Marketing, IT, Healthcare, Education, and Government.

To add to the visualization experience offered by FusionCharts, a responsive web layout is all that is needed. FusionCharts can be easily integrated with Bootstrap, a popular front-end framework, to create responsive dashboards.

Bootstrap is an open source, front-end web framework, used for designing web applications and websites. The framework is built on CSS and written in LESS (a style sheet language that uses variables, functions, and several other techniques to help make your CSS customizable).

Bootstrap comes with a collection of free to download and use templates, simplifying website designing significantly. The templates are showcased along with their source code, so all you need to do is modify the source code to suit your requirements—no coding from scratch required.

Responsiveness to the client device’s screen resolution is Bootstrap’s strongest feature. Merging FusionCharts’ ready-to-use chart samples with Bootstrap’s responsive, ready-to-use templates makes creating dashboards easier than ever.

Since Bootstrap plugins are heavily dependant on jQuery, the FusionCharts jQuery plugin can be used to simplify communication between the two.

Example: Creating a Responsive Dashboard with Interactive Charts

The Google Analytics dashboard is a great example of how dashboards should be and what information they should communicate. However, the dashboard is not responsive, which makes it difficult to be viewed using mobile devices.

For demonstrating how Bootstrap and FusionCharts can be used together to create impressive, and responsive, dashboards, we’ve reproduced one part of the Google Analytics dashboard and made it responsive, as shown in the image below:

The Google Analytics Dashboard, as partially reproduced by using FusionCharts with Bootstrap

The Google Analytics Dashboard, as partially reproduced by using FusionCharts with Bootstrap

The Google Analytics dashboard gives website owners a holistic view of the website traffic statistics. The dashboard gives you traffic information for a specified duration, which includes the total number of visitors for that duration, traffic classification (based on visitor type, gender, age group, traffic source, and location), and so on.

The dashboard has been created using the FusionCharts jQuery plugin with the Bootstrap library. Using FusionCharts lets you pick the right chart type for showcasing specific kinds of data; using Bootstrap allows you to create a responsive dashboard that is rendered and works consistently across all platforms and browsers.

Click here to view the dashboard in action. Try rendering it on devices with different screen resolutions to see how the dashboard layout adapts to the current screen resolution.

The images below are partial screenshots showing how the dashboard layout readjusts to fit in on a phone and an iPad.

Partial view of the Google Analytics dashboard when rendered on a mobile browser

Partial view of the Google Analytics dashboard when rendered on a mobile browser

Partial view of the Google Analytics dashboard when rendered on an iPad

Partial view of the Google Analytics dashboard when rendered on an iPad

FusionCharts Suite XT is all about simplifying and beautifying data visualization. It’s been time since we have come up with new additions for you. Well, we are here with something new, yet again, with FusionCharts Suite XT v3.11.2.

FusionCharts Suite XT v3.11.2 introduces an alternate installation method via npm and Bower package managers—making installation easier, better, and faster.

Note: Before adding the FusionCharts package to your local machine using npm or Bower, ensure that you have that particular package manager already installed on your system. You also need the command line in your system to be up and running.

Read on to see how useful this solution is.

Installing FusionCharts Suite XT via npm

npm reduces the friction for developers. The major reason for creating it was to help JavaScript developers share packaged modules of code easily. The npm Registry is a public collection of packages and the packages can contain anything, whether it’s ES6, client-side JS, or even HTML and CSS.

To install the FusionCharts on your local machine, via npm, type the following command on the command line:

$ npm install fusioncharts

Click here for a step-by-step tutorial on rendering charts via npm.

Installing FusionCharts Suite XT via Bower

Bower is a package manager that has in built CSS frameworks like Bootstrap, libraries like jQuery, jQuery plugins, or JavaScript frameworks like Angular. Bower fetches and installs packages from all over, which saves your time to hunt, find, download, and save the stuff you’re looking for.

To install the FusionCharts on your local machine, via Bower, type the following command on the command line:

$ bower install fusioncharts

Click here for a step-by-step tutorial on rendering charts via bower.

We’ve got a lot more added and improved in the product to make sure that you have the best data visualization experience ever! Click here to read about all that v3.11.2 brings to you. We would love if you can give our package a try. And if you are stuck anywhere, drop us a line at support@fusioncharts.com . Happy to help!

Using FusionCharts with FileMaker Pro 15

FileMaker, a powerful consumer database application, lets you create database solutions that work exactly as you want them to. Using FusionCharts Suite XT you render and manipulate your charts seamlessly across any application built using FileMaker Pro 15. With this you can add interactive JavaScript charts to your web viewer with the delight and comprehensiveness of the FusionCharts Suite.

This article talks about how you can render the charts and maps from FusionCharts using FileMaker Pro.

Setting up the FusionCharts Suite XT

You can easily buy a license to use FusionCharts in any commercial application. The FusionCharts Suite trial version is also available to download for free with no feature restrictions (trial version will show an evaluation watermark).

Once you have bought the licensed or the trial version, installation of FusionCharts Suite XT merely involves copying and pasting the JavaScript files from the download package into your project folder. Thereafter, you can simply include the FusionCharts JavaScript library in your web applications and start building your charts, gauges, and maps.

FusionCharts provides you with an exhaustive gallery of live examples, hosted in JSFiddle along with the source code. This library serves as a great reference source to draw inspiration from.

Creating a Project in FileMaker Pro

To render and manipulate charts using FileMaker, you first need to create a project in the FileMaker application.

Following are the basic steps that will help you in creating a project:

  1. Open the FileMaker application and click the File tab.
  2. In the navigation pane, select New Solution.
  3. Give a name to the application you are going to built and choose a directory for saving your project.
  4. Click Save. This will create:
    • A layout with the same name as that of your project
    • A table with the same name as that of your project

Adding a Web-Viewer to your Layout

FileMaker lets you add a web viewer to display a web page on a layout. The address of the web page can either be a constant or a calculation based on the data in the current record.

To add a web viewer:

  1. From the status toolbar, click the web viewer tool
  2. toolbar

  3. Drag the crosshair to draw the web viewer


  1. From the Insert menu, click Web Viewer

The web-viewer looks as shown below:
Web Viewer

Adding FusionCharts to the Web Viewer

To render FusionCharts using Filemaker, add the FusionCharts JavaScript libraries to the web viewer using following steps:

  1. Click the File tab.
  2. From the navigation bar, point to Manage, and then select Database (or press CTRL+SHIFT+D). You will see a table with the same name of the layout, where you can add fields to the table by clicking on the table name.
  3. To add fields to the table, click menu/button/option. Name the first field say index_HTML and set its type to Calculation. The Specify Calculation dialog box opens.
  4. To render FusionCharts, create some basic fields such as chartType, container_id, chartWidth, chartHeight, dataFormat and dataSource and set their type to text.
  5. To make all these fields global:
    • Select a field and, from , click Option. The dialog box opens
    • Select the Storage option and select the checkbox for Use Global Storage
  6. In the Specify Calculation dialog box (created in step 3), write the source code that is executed to generate a HTML code (the HTML code is given below). This code is later appended to the Web-Viewer.

The database looks as shown below:


  1. Click Web-Viewer. A window opens, where you have to write the table_name:: index_HTML in the web address (table name is same as that of your project name).

By following all the above steps web viewer gets linked to the calculation in the index_HTML.

Adding Calculation to index_HTML

The code below is a template to be added in your index_HTML field. This calculation will render the HTML content for the chart:

There are 2 ways to include the FusionCharts library for the above code:

  1. Using the FusionCharts library link from the local folder:
  2. Using FusionCharts uploaded on a remote server:

Adding Data to the Fields

Add data for the following fields:

  1. chartType: The type of chart that you intend to plot. e.g. column 3D, column 2D, pie 2D etc.
  2. chartId: A unique ID for the chart, using which it will be recognized in the HTML page. Each chart on the page should have a unique Id.
  3. chartWidth: Intended width for the chart (in pixels), for example, 600
  4. chartHeight: Intended height for the chart (in pixels), for example, 450
  5. containerId: ID of the chart container, for example, chart-1
  6. dataFormat: Type of data used to render the chart, for example, json, xml.
  7. dataSource: Actual data for the chart, for example, {“chart”:{},”data”:[{“label”:”Jan”,”value”:”420000″}]}

To add data in the above fields:
Go to Browse mode and, from the status toolbar, select Table View. Add the field value one by one directly into the table.


Now, as you are all set with our library and web viewer, the last and the most important thing you need to render the chart is the datasource where you will pass your data to the chart. It will specify the source from where the data will be fetched, depending on the value passed to the dataFormat attribute.
Note: Stringify your JSON data before using it to render a chart

For example:

The table with value inserted looks as shown below:


In the above code, chart properties and the data values to be plotted are specified using the JSON format. The chart object is used to set the chart properties; the data object is used to specify the data labels (using the label attribute) and the data values (using the value attribute).

Viewing the Chart

Now that all the setup is done, you don’t need to wait for long to view the output. All you need to do is:

  1. Click View and select Browse Mode (you can also do this by pressing Ctrl+B)

The output looks as shown below:


Download a Sample Project

You can download a sample project of FusionCharts using FileMaker by clicking here.
To run the project, all you need to do is:

  1. Go to File -> Manage -> Database (or ctrl + shift + d )
  2. Open the field called index_HTML of type “Calculation”
  3. Replace the source in the


While using FusionCharts with FileMaker Pro 15, you may face roadblocks or errors. Following are some troubleshooting suggestions:

  1. Escape the double quotes ” “, for the JSON data.
  2. The table name is by default same as that of your project.
  3. To add the libraries, always use their absolute path.
  4. Always add 3 forward slash (///) while adding libraries, before adding the path (for example: src=\”file:///C:/desktop/JS/fusionCharts.js\”)

Now, as you have created your first chart using FileMaker, here are some of the advantages of using FusionCharts Suite XT with FileMaker:

  1. Easy to Get Started
  2. Cross-platform (Mac OS X, Windows, iOS)
  3. Includes starter solutions
  4. There are many plugins available to extend the functionalities
  5. Has some neat built in tricks like built in graphs, tab controls, web viewers

It is the new year and we at FusionCharts are super-excited! Not just because it is time for new beginnings and new resolutions, but also because FusionCharts Suite XT v3.10 is now out!

It’s been a while since we introduced a new chart. So this time around, we thought why not surprise you and bring in three new charts, highly requested by customers, that aid in visualizing newer and bigger forms of data.  

Read on to know what’s new!

The Treemap Chart

The treemap chart is modeled on the tree data structure and is used to plot hierarchical information. It is created using 2D nested rectangles, which represent the nodes and leaves of the information tree and can be compared to gain insights from the information rendered on the chart.

Take a look at the live sample of a treemap chart below:

This treemap chart compares the sales team’s performance in the present year with their performance in the previous year. The employees are categorized region-wise.
Drilling down and up the nodes is the mode of traversal through the treemap chart. To drill-down to a leaf node, you can directly click that node. For example, when any rectangle (node) in the Northern Region is clicked, the chart drills down to the following view:


Another way to drill down the chart is to click on a parent node to view the complete cluster of nodes belonging to the parent node.

There are two methods for you to drill back up.

Method 1: Traverse up one level at a time

  • Click the parent node to traverse one level up at a time.


  • Click the icon below to go one level up.

Method 2: Traverse up directly to the initial stage

  • Click the icon below to go directly to the initial stage.

Applications of a Treemap Chart

Common use-cases represented using the treemap chart include showing the folder structure of a system. It is also used to study patterns and occurrences in a large data set. This is because the colour and the size dimensions are correlated.

Click here to read more on the treemap chart.

The Zoom Scatter Chart

The FusionCharts Suite XT zoom-scatter chart is a special type of chart that extends the capabilities of the scatter chart to include the zooming and panning features. It can be seen as an extension of the scatter chart with the ability of displaying millions of data points because of the zoom and pan feature.

Take a look at the sample zoom scatter chart shown below:

The chart compares the admission rate (in percent) with the average annual return on degree (in percent) for five majors and over a period of 20 years.

Drag the mouse-pointer over the chart to select and zoom into a subset of data points. You can also pan through the data points to analyze the chart data in detail.

The  zoom-scatter chart is primarily used to find correlations between datasets, which can be determined by the visual patterns of the data.  The chart supports regression lines that allow the user to find correlation in large datasets. Higher the number of data points, higher are the chances of more accurate correlations. The zoom-scatter chart is capable of handling more than a million data points in modern canvas supported browsers (including IE9+).

Click here to read more on the zoom scatter chart.

The Zoom-line Dual Y-Axis Chart

The zoom-line dual y-axis charts extends the capabilities of the zoom-line chart by introducing support for a secondary y-axis. This chart can, therefore, be used to plot datasets that have different numeric units or different intervals—a clear advantage over using the single y-axis zoom-line chart.

Take a look at the sample zoom-line dual y-axis chart shown below:

This zoom-line chart is used to compare the unique footfall with the sales (in dollars) for each day of the previous year.

The zoom-line dual y-axis is similar to the zoom-line chart in every aspect, except for its support of the secondary y-axis.

Click here to read more about the zoom-line dual y-axis chart.

Interesting, are they not? And if you thought that was it, then no. We’ve got a lot more added and improved in the product to make sure that you have the best data visualization experience ever! Click here to read about all that v3.10.0 brings to you.

If you have been using FusionCharts, then only way to export your charts into image, PDF or SVG till now was to use a server. Either FusionCharts export server or the one you setup on your own. We realised this was not the best way and we have made something to make your job faster and easier – client-side export.

Why do you need client-side export feature?

You’ve received quotations from vendors for a critical project that you are working on and, courtesy FusionCharts, you’ve created some good-looking, information-rich charts that compare the pros and cons of each vendor as well as their price and deadline figures.

The senior management asks for a presentation and you can’t wait to show them what you have. You decide to use our server-side export feature that comes out of the box to export your charts as JPEGs and add them to your presentation.

But wait. Won’t this data classify as confidential information? Would it be okay then if you used a publicly hosted server to export and download the chart? We don’t think so. This is where client-side export comes into picture.

While we have an established server-side exporting feature, common concerns with this feature include:

  • Availability of a good internet connection to send to and receive data from the server.
  • Confidentiality concerns around using the publicly hosted export server.  We do provide programs to set up the export server at a your end, but this requires you to have a knowledge about configuring and using servers. This, again, is a downside.

The primary need for coming up with the client-side export feature  was to eliminate the need of a server for exporting, thus bringing down the turnaround time it takes for a download, as well as to to address the data confidentiality issues. The client-side export feature removes the round-trip involved in exporting from a  server and eliminating the difficulties involved in setting up one, with the proper dependencies.

How to make use of it?

To enable the client-side export feature for your application, all you need to do is set the exportEnabled and the exportAtClientSide (since v3.8.0) attributes to 1 and you are good to go. You can test it live here.

For more details on how to use this feature you can check out our developer center article on client-side export.

Note: This feature is currently supported in latest versions of Chrome and Firefox only. Our team is working hard to roll it out for other browsers in coming weeks.

Have any questions?

We hope you give client-side export feature a try in your next project! If you are ever stuck or have any questions, feel free to drop a line at support@fusioncharts.com. Our team will be happy to help!