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 APIprovides 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.
$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');
var x = Drupal.settings.my_array['field_1']; var y = Drupal.setting s.my_array['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
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".
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.