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:
      npm install fusioncharts
      npm install fusionmaps
    2. For Bower:
      bower install fusioncharts
      bower install fusionmaps
  • 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.
< ?php
   $hostdb = "localhost";  // MySQl host
   $userdb = "root";  // MySQL username
   $passdb = "";  // MySQL password
   $namedb = "data";  // MySQL database name
   $dbhandle = new mysqli($hostdb, $userdb, $passdb, $namedb);
   if ($dbhandle->connect_error) {
     exit("There was an error with your connection: ".$dbhandle->connect_error);
   }
?>
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.).
 drupal_add_js('modules/lib/fusioncharts.js');
drupal_add_js('modules/lib/fusioncharts.charts.js');
drupal_add_js('themes/fusioncharts.theme.fint.js');
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.
$strQuery = "SELECT DISTINCT revenue_type, revenue_value,revenue_budget, expenditure_type, expenditure_value,expenditure_budget FROM financial_records";
 $result = $dbhandle->query($strQuery) or exit("Error code ({$dbhandle->errno}): {$dbhandle->error}");
Achieve the required json format using php,to render the chart.
 if ($result) {
     //Creating the chart object
     $arrData1 = array(
        "chart" => array(
                    "paletteColors" => "#23B7B7,#ED3132,#3CDAE0",
                    "bgColor" => "#EAEAEA",
                    "showLabels"=>"0",
                    "showBorder" => "0",
                    "use3DLighting" => "0",
                    "showShadow" => "0",
                    "enableSmartLabels" => "0",
                    "startingAngle" => "0",
                    "showPercentValues" => "1",
                    "showPercentInTooltip" => "0",
                    "decimals" => "1",
                    "captionFontSize" => "14",
                    "subcaptionFontSize" => "14",
                    "subcaptionFontBold" => "0",
                    "toolTipColor" => "#ffffff",
                    "toolTipBorderThickness" => "0",
                    "toolTipBgColor" => "#000000",
                    "toolTipBgAlpha" => "80",
                    "toolTipBorderRadius" => "2",
                    "toolTipPadding" => "5",
                    "showHoverEffect" => "1",
                    "showLegend" => "1",
                    "legendBgColor" => "#ffffff",
                    "legendBorderAlpha" => "0",
                    "legendShadow" => "0",
                    "legendItemFontSize" => "10",
                    "legendItemFontColor" => "#666666",
                    "useDataPlotColorForLabels" => "1",
                    "theme"=>"fint"
               )
          );

    //creating the data array
        $arrData1["data"]=array();
          while($row = mysqli_fetch_array($result)) {
                            
                    array_push($arrData1["data"], array(

                          "label" => $row["expenditure_type"],
                          "value"=>$row["expenditure_value"]
                         )
                    );      
          }

    //encoding the array in json format
      $jsonEncodedData_chart1 = json_encode($arrData1);
     
$expenditureChart = new FusionCharts("pie2d", "chart2" , "100%", "300", "chart-container2", "json", $jsonEncodedData_chart1);

//rendering the chart
      $expenditureChart->render();

      // closing db connection
      $dbhandle->close();
   }
?>
Finally define the div where the chart will render. i.e.
Chart will render here!
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.

Take your data visualization to a whole new level

From column to donut and radar to gantt, FusionCharts provides with over 100+ interactive charts & 2,000+ data-driven maps to make your dashboards and reports more insightful

Explore FusionCharts

Leave a comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Your next great dashboard starts here

With our interactive and responsive charts, extensive documentation, consistent API, and cross-browser support - delight your customers with kick-ass dashboards

Explore FUSIONCHARTS