Integrating Fusion Charts into Drupal

By peterm, 17 August, 2011

I've been working with Fusion Charts and Drupal with varying levels of success on our campus sustainability site. Here's what we we're doing to make things. work.

We began working with the fusioncharts module. It seemed to do a lot, but we were hoping to use Webforms to create forms that we'd have users provide data through. The fusioncharts module and Webforms 6.x-2 combination worked well with Fusion Charts Free. While we were in the design phase for the sustainability site, we hired out some work to extend the fusioncharts module for our needs. We again made an incremental improvement. Then Webforms 6.x-3 came out. The fusioncharts module was incompatible. ack.

As we worked with our fusioncharts custom module, it became evident that Fusion Charts could do a lot more, but that the current version of the fusioncharts module didn't map to the advanced features of FC. So, I began looking at how we could simply integrate PHP code into Drupal nodes to have them output Fusion Charts. Here's how we got things working.

In the FC manual, there's a section on PHP. We read the manual and created a directory structure to hold the necessary files in our /sites directory. That looks like this:

In order to get Drupal to evaluate PHP code pasted into a node body field, you need to turn on the PHP module. Then we started pulling out examples from the FC manual and pasting them into Drupal. The first thing we have to do is call the FusionCharts.js file via drupal_add_js(). 

<?php drupal_add_js('sites//MyFusionCharts/FusionCharts/FusionCharts.js'); ?>

Next, we need to inlcude the FC class file. 

<?php

           # Include FusionCharts PHP Class          

include('sites/MyFusionCharts/Class/FusionCharts_Gen.php');

Now we can paste in the rest of the code block that defines the chart parameters. Note the $FC->setSWFPath setting that points to our diectory full of swf files.

# Create Multiseries Stacked Column2D Line DY object using FusionCharts PHP Class 

         $FC = new FusionCharts("MSStackedColumn2DLineDY","450","350");

           # Set the relative path of the SWF file

         $FC->setSWFPath("sites/MyFusionCharts/FusionCharts/");

           # Define chart attributes

         $strParam="caption=Annual Revenue;rotateValues=1;xAxisName=Year; PYAxisName=Revenue;SYAXisName=Cost as %25 of Revenue;numberPrefix=$; numberSuffix=M;sNumberSuffix=%25;SYAxisMinValue=0;SYAxisMaxValue=100; showValues=0;useroundedges=1;showSum=1";

           # Set chart attributes 

           $FC->setChartParams($strParam);

           # Add category names

           $FC->addCategory("2001");

           $FC->addCategory("2002");

           $FC->addCategory("2003");

           $FC->addCategory("2004");

           $FC->addCategory("2005");

           # Add Multi-series  Dataset

           $FC->createMSStDataset();

           # Add Multi-series dataset with in dataset

           $FC->addMSStSubDataset("Product A", "");

            # Add set data for plotting the chart

           $FC->addChartData("30");

           $FC->addChartData("26");

           $FC->addChartData("29");

           $FC->addChartData("31");

           $FC->addChartData("34");

           # Add Multi-series dataset with in dataset

           $FC->addMSStSubDataset("Product B", "");

           # Add set data for plotting the chart

           $FC->addChartData("30");

           $FC->addChartData("26");

           $FC->addChartData("29");

           $FC->addChartData("31");

           $FC->addChartData("34");

        

           # Add Multi-series  Dataset

           $FC->createMSStDataset();

           # Add Multi-series dataset with in dataset

           $FC->addMSStSubDataset("Product C", "");

           # Add set data for plotting the chart

           $FC->addChartData("30");

           $FC->addChartData("26");

           $FC->addChartData("29");

           $FC->addChartData("31");

           $FC->addChartData("34");

            # Add Multi-series lineset for showing lines

           $FC->addMSLineset("Cost as %25 of Revenue","lineThickness=4");

            # Add set data with in lineset

           $FC->addMSLinesetData("57");

           $FC->addMSLinesetData("68");

           $FC->addMSLinesetData("79");

           $FC->addMSLinesetData("73");

           $FC->addMSLinesetData("80");

      ?>

We did strip out the <html><head><title><body> section of the example code because we didn't need it for Drupal.

Finally, we called the renderChart() function to place the chart in the Drupal node.

<?php

             # Render Chart        

             $FC->renderChart();       

?>   

I'm still experimenting and will post additional notes later. One thing to know is that when pasting from the FC manual, the $strParameter lines had line breaks in them. When I removed the linebreaks, the chart started appearing correctly.



 

Tags