WijBubbleChart is a Scatter chart in which the data points are replaced with bubbles. This type of chart can be used instead of a Scatter chart if your data has three independent values. Using WijBubbleChart a user can get the overview of the data which is being presented at the initial view. However, it is very much possible that he may want to get some more information from the bubbles which are presented to him. Though there is no direct way to achieve this; however we can make a simple WijBubbleChart ready for drilldown operations using the available events and methods. Here in this blog lets discuss an approach to create a DrillDown BubbleChart. Following is a small glimpse of what we are looking to implement:

WijBubbleChart Initialization

Let us first take a look how our Widget initialization is set up:

$("#wijbubblechart").wijbubblechart({  
   horizontal: false,  
   axis: {  
      y: {  
          text: "Total Hardware",  
          annoFormatString: "p0"  
      },  
      x: {  
          text: ""  
      }  
   },  
   header: {  
       text: "Hardware Distribution"  
   },  
   seriesList: seriesList,  
   chartLabelFormatString: "p2",  
   click: drawVersions  
});

Handling DrillDown Operation

In the above code, you will notice that we are calling a drawVersions function in the click event. This is actually the function which handles the drilldown operation. Here is how it looks:

var drawVersions = function (e, data) {  
   var key = data.label, series = drillDownData[key];  
   $("#wijbubblechart").wijbubblechart("option", "click", drawBrands);  
   $("#wijbubblechart").wijbubblechart("option", "seriesList", series);  
}

Also once we drilled down on the chart we would certainly want to get back to the upper level. To do this we have created another function drawBands which can be seen in the code above. Let us now see how it looks:

var drawBrands = function (e, data) {  
   $("#wijbubblechart").wijbubblechart("option", "click", drawVersions);  
   $("#wijbubblechart").wijbubblechart("option", "seriesList", seriesList);  
}

The only thing we need to set up is the data which is required for the chart. I am not including it here; however it is important to supply the data in the correct format to get it to work. Download Sample