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.

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!