A drill down chart is an interactive component that lets the user drill down through levels of data thereby providing a rich user experience. It is a common requirement in projects to create reports for different levels of data. Recently our research and development team experimented an open source charting tool visifire which makes use of the Microsoft silverlight plugin in the browser and JavaScript to render the graph. Since it is done on client side the server response is made lighter. These charts can be embedded into desktop or web applications or even into mobile applications (Windows phone 7 series). Visifire does not provide a ready to use feature for creating live charts that can be drilled down to lower levels, which can however be achieved by making use of javascript events. Visifire has got an in-built event handler to invoke these events triggered while clicking on various points on the chart. Let’s see how this can be done.

Consider the example of a column chart which gives the year wise project completion status for a client. Now, on clicking on one of the columns, it should show the number of projects completed in different platforms (say .net, php, iPhone, android etc), for that corresponding year.

For the second level of chart to be rendered, the click event of the first chart should be captured which calls a javascript function, which can be implemented by adding a few lines of code as follows, before rendering the chart. 

//vChart1.preLoad = function(args)

  {

   chart1 = args[0];

      chart1.Series[0].MouseLeftButtonUp = function(e)

   {

                 onMouseUpProjectsPerPlatform(e.AxisXLabel);

            };

  }; //

On clicking one of the columns of the first chart, a call is made to the javascript function ‘onMouseUpProjectsPerPlatform’, which accepts one parameter, the AxisXLabel of the first chart, which here is the ‘year’ selected. On obtaining the year, we can render the next level, by generating the required xml. This can be done entirely from the client side, but in most cases, we will have to pull data from the database and generate the xml from the server side. To generate the XML from code behind, we can make use of pagemethods or webservices.

Rendering of the chart from the server side is accomplished using RegisterStartUpScript,. However this is meaningless in a webmethod, and we have to return the xml to the calling function.

//function onMouseUpProjectsPerPlatform(var year)

{

      // call to the web method, which returns the required xml.  

//}

We can now render the xml to the required HTML container element from the OnSucces function of the webmethod call. 

//function OnSuccess(xml)

{   

    vChart2.setDataXml(xml);

    vChart2.render("htmlElementID");

//} 

In the above instance, we can add a third level which gives the month wise project completion status for that year and selected platform.

Dotnet team @ Software Associates