Drupal / Microsoft - Dashboard Nirvana

As previously mentioned we have been doing some work on a Microsoft sponsored case study to look at how well different parts of their technology can integrate with Drupal, and as a side benefit produce some tools that will be of use to charities and NGOs. The project has been somewhat irreverently dubbed project Dango, as in "Drupal And NGOs" (but also a tasty looking form of Japanese dumpling - Mori, can you bring us some back?) and it has been progressing at speed over the last few weeks. My task was to create a "dashboard" type feature that would enable site admins to see some top level statistics for the site, such as number of donations, number of email signups or average donation amount, illustrated with visually appealing charts. The visualisation aspect would be handled by Microsoft's Silverlight while Drupal would handle the backend data storage and number crunching. The code would be packaged into a module and ideally offer extension points for other modules to hook into and add their own data.

Silverlight... really?

I must admit that coming into this project I had pretty negative preconceptions about Silverlight, having always regarded it as a somewhat pointless clone of Adobe Flash; yet another annoying plug in to download, to add needless weight and gratuitous animation to pages and increase the chances that your browser will crash. However, the plugin installation process is actually very painless in every browser I tried it in and according to recent stats the overall market share of the plugin continues to grow - though it still has a long way to go to catch up with Flash. Nevertheless, it is still a technology worth considering, particularly if you have other MS tech like IIS and want to make use of features such as smooth streaming video. From a developer point of view, Silverlight is clearly targeted at Microsoft's existing developer community. Coding is done using Visual Studio (I was using the free Visual Web Developer Express) in either C# or Visual Basic, together with a UI definition markup language called XAML - each XAML file has a corresponding "code behind" file, a concept which will be comfortingly familiar to .NET developers. In addition, another tool called "Expression Blend" allows you to author Silverlight interfaces in a more visual way, and you can switch easily from one to the other as they work with the same project files. Having spent some time getting a little familiar with Silverlight coding, I realised that it would probably be too time consuming to try to create the chart components from scratch as well as integrate them into a Drupal module, so I began searching around for alternative approaches. Fortunately, there is a good selection of pre-built Silverlight components available for just about every common "rich UI" requirement, and this is definitely worth bearing in mind. You don't necessarily need to learn Silverlight to use it in your website, and if you're searching for something similar in flash or pure javascript, it's probably worth looking into whether there are any prebuilt Silverlight options as well. In this project, I settled on the VisiFire charting suite, which is available under a GPL 3 license. The component can create a wide range of aesthetically appealing charts, controlled via a javascript API.

Module Features

After deciding on a strategy for integrating Silverlight, it was time to get on with the actual coding. My aim was to create a module which in the first instance would have: * A configuration page for setting chart options and styles * A dashboard overview page to display different types of data * Individual dashboard pages rendering any number of charts, either as bar or pie charts * A developer API to allow modules to create dashboard pages * An example module to demonstrate the API Working with Drupal's API and the VisiFire component, this was all reasonably straightforward to create. One annoying problem I did discover though was that the VisiFire object needs to be configured with a XAML string, which in the examples is defined directly in a block of javascript - not great. My approach was to load the XAML using AJAX, which obviously means a number of extra requests to the server. I would prefer to find another way of embedding the XAML directly in the page somehow, though I have not had time to investigate this any further.

Getting Hooked

The module defines two hooks that other developers can implement to get their data included as a dashboard and rendered using some pretty charting: * hook_activity_dashboard_info - provide metadata such as the name of the dashboard page, description, an icon, and a list of the different datasets that will be displayed * hook_activity_dashboard_data - provide the actual datasets for the dashboard module to render The dashboard module shouldn't have to worry about where information is stored, or how it is queried; it is designed just to accept datasets in a predefined format, leaving implementing modules to worry about how to get their data out the database. The usage of the hooks is illustrated by the example module which is provided.

Next Steps

The project is now in its wrap up stage so we will be looking to package up the code and get it released. I am also hoping that others within the project will be able to use the API to populate some real data and also verify whether it works or needs changing. There are then lots of other features that could be added in time: * Support for other chart types * Support for other charting libraries * Different layouts for dashboard pages (2 or 3 column) * Out of the box support for visualising basic Drupal data, eg. user signups, nodes added, comments added etc. So soon, we could be in Drupal dashboard nirvana!