Charts are the best way to display data graphically. However getting insight of a single level of data through a chart might not be enough and you may want to drill down further. For Example, you have a chart displaying the total amount of Orders in yearly basis, and you may want to drill down further, in order to know the distribution in a particular year on monthly basis or on a daily basis. In this blog, we will see how we can implement this feature through Wijmo BarChart with the help of the WebService and AJAX call.

Defining WebService

Implementation begins by defining a webservice named GetOrders.asmx with three WebMethods which are used to fetch data from table and returns an object collection of type List. The three WebMethods are summarized as follows:

1. GetDataOnLoad() - This method returns sum of OrderAmount grouped by Year. Select Command: "Select Year(OrderDate), Sum(OrderAmount) from OrdersByDate where Year(OrderDate) In (Select Distinct(Year(OrderDate)) from OrdersByDate) Group By Year(OrderDate)"
2. GetOrderByMonth(string Year) - This method returns sum of OrderAmount grouped by Month for a particular year. Select Command:"Select Month(OrderDate), Sum(OrderAmount) from OrdersByDate where Month(OrderDate) In (Select Distinct Month(OrderDate) from OrdersByDate) and Year(OrderDate)="+ Year + " Group By Month(OrderDate)"
3. GetOrderByDay(string Month, string Year)- This method returns sum of OrderAmount grouped by Day for a particular year in a particular month. Select Command: "Select Day(OrderDate), Sum(OrderAmount) from OrdersByDate where Day(OrderDate) In (Select Distinct Day(OrderDate) from OrdersByDate) and Year(OrderDate)=" + Year + " and Month(OrderDate)="+Month+" Group By Day(OrderDate)

Binding WijBarChart

The WijBarChart is bound to the data by placing a call to one of the WebMethods using the jQuery Ajax() method. These methods return data in the form of an Array which is set as datasource for the chart using "DataSource" property. When chart is loaded for the first time, GetDataOnLoad() method, as mentioned above, will be called as follows:

$(document).ready(function () {  

 //ajax call to get the data  
 $.ajax({  
    type: "POST",  
    url: "GetOrders.asmx/GetDataOnLoad",  
    contentType: "application/json; charset=utf-8",  
    dataType: "json",  
    data: {},  
    success: function (data) {  
       var arr = [];  
       try {  
          //push the data in an array  
          $.each(data.d, function (i, elem) {  
          arr.push({  
             Year: elem.Year,  
             OrderAmount: elem.OrderAmount  
          });  
       });  
       //initialize the barchart widget  
       $("#wijbarchart").wijbarchart({  
          shadow: false,  
          textStyle: { fill: "#b2b2b2", "font-weight": "bold", "font-size": 15 },  
          axis: {  
             y: {  
                labels: { style: { fill: "#242529", "font-size": 11} },  
                gridMajor: { style: { stroke: "#353539", "stroke-dasharray": "- "} }  
             },  
             x: {  
                labels: { style: { fill: "#7f7f7f", "font-size": 11} }  
             }  
          },  
          hint: { content: function () { return this.data.label + '\\n ' + this.y + ''; } },  
          header: { text: "Order Details" },  
          horizontal: false,  
          //set the datasource of the BarChart  
          dataSource: arr,  
          seriesList: [{  
             label: "Yearly Amount of Orders",  
             legendEntry: true,  
             data: { x: { bind: "Year" }, y: { bind: "OrderAmount"} }  
          }],  
          seriesStyles: [{ fill: "180-#ff9900-#ff6600", stroke: "#ff7800", opacity: 0.8}],  
          seriesHoverStyles: [{ "stroke-width": 1.5, opacity: 1}]  
          });  
       }  
       catch (e) {  
          alert(e);  
          return;  
       }  
      },  
       error: function (result, status) {  
          if (status = "error") {alert(status);    }  
       }  
    });  
});

Implementing DrillDown Operation

Now, to further drill down into the chart details, you have to handle the OnClientClick event of WijBarChart and use the WebMethod GetOrderByMonth to retrieve all the orders in the selected year.

 $("#wijbarchart").wijbarchart({ click: function (sender, args) {  
 //ajax call to get the data  
 $.ajax({  
   type: "POST",  
   url: "GetOrders.asmx/GetOrderByMonth",  
   contentType: "application/json; charset=utf-8",  
    dataType: "json",  
    //pass the year selected  
   data: "{Year:'" + args.x + "'}",  
   success: function (data) {  
      var arr = [];  
       try {  
         //push the data in an array  
          $.each(data.d, function (i, elem) {  
           arr.push({  
           Month: elem.Month,  
           OrderAmount: elem.OrderAmount  
          });  
       });  
       //set the datasource of the BarChart  
       $("#wijbarchart").wijbarchart({  
         horizontal: false,  
         dataSource: arr,  
         seriesList: [{  
           label: "Orders By Month in year " + args.x,  
           legendEntry: true,  
           data: { x: { bind: "Month" }, y: { bind: "OrderAmount"} }  
         }],  
         //attach new handler with click event  
         click: OrdersByDay  
       });  
       //Save the selected year for further driling down  
       $("#HiddenField1")[0].value = args.x;  
       }  
      catch (e) {  
         alert(e);  
         return;  
       }  
   },  
   error: function (result, status) {  
      if (status = "error") {  
         alert(status);  
      }  
   }  
   });  
   }  
});

The output for the three WebMethods are displayed as below: Download the attached sample for complete implementation. Download Sample