One of recent initiative taken by Srijan was to organize Srijan Weekend of Code(SWoC) wherein company employees would work on a problem over a weekend in a team of two members and the best solution submitted would win a reward.

The problem we had to work upon for the first SWoC was to intergrate HighCharts API in Drupal. To give a brief about what HighCharts does: HighCharts API helps to implement really cool and interactive Java Scripts Charts for web projects. We had to implement a stacked bar chart using a result of a survey.

Well, I think there might be an already contributed module which might do the same thing but we thought of building of our own custom module for this as the implementation seemed not that hard as the HighCharts API provides really good documentation and lots of examples of graphs and looking at the code of the examples, one could easily figure out how the stuff works.

We were provided with a survey result in an excel format, so we converted this to CSV format so that we could use this data to generate the charts. This was done the using file handling functions provided by php library and since I come from a C background, so my php code still has a touch of C in it and php developers might laugh at the kind of code I write :p.

To integrate with Drupal, we built a custom module and had to implement hook_menu() which provided the landing pages for the result of the survey and the callback function of this menu was the function where all the data processing was done. In our case the data was read from a CSV file, but the source of data could be a form as well. Since we needed the HighCharts API to implement the graph which can be dowloaded form here. The downloaded folder was kept in the folder of custom module, but I feel libraries folder in sites/all/libraries would have been the correct place for it. Two JS files had to included to use the API(exporting.js and highcharts.js) which was done using drupal_add_js(). We had to build another JS file where we wrote the code to create the graph from the result of the survery.The results of the survey had to be sent to javascript which was done by drupal_add_js() where we can pass the values to javascript in an array as follows.

 


 
$items = array(
  '0' => array (     
    'field_1' => 'somevalue',
    'field_2' => 'somevalue'
  ),
  '1' => array (
    'field_1' => 'somevalue',
    'field_2' => 'somevalue'
  ) 
); 
drupal_add_js(array('my_array' => $items), 'setting');

 

and the value is retrieved in the javascript:

var x = Drupal.settings.my_array[0]['field_1'];
var y = Drupal.setting s.my_array[0]['field_1'];

To create the graph an object of type HighCharts.Charts was created in the JS file where we defined all other parameters for the graph which included data to be included on x-axis and y-axis, background. The examples given in the API is a classic place to refer for the structure of JS files, instead of reading the lengthy documentation.

Some of the images of the implementation are shows below

graph 1

Clicking on any of link, e.g. would filter that from the graph and in case some one wishes to see the survey for just one type that feasible too, just by disabling and filtering other result. For example in the image below I have disabled all the survey data except "Too Pricy".

graph 2

That's how we implemented the integration and one such integration can be seen at here. Just play with the graph by clicking on the various links below the graph and see the magic.

Before I forget, we won the first SWoC :). Thanks Akash for being an awesome team partner.