Analytic Dashboard using Drupal and FusionCharts

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.

Leave a Comment