Drill down chart data in web page | Kettic ASP.NET AJAX Chart Control

Chart Feature Drill Down Value in ASP.NET

Home > How to > Chart Drill Down

Kettic ASP.NET chart control provides drill down feature. Why you need drill down? In many cases, you want to view the detail information in some data series, but current chart graphs don't show these information. And now, it's necessary to provide a function to view more details from current chart graphs.
The drill down functionality is able to be used to click on a graphical element like a bar, a pie segment and so on, which may stand for some data. The Drill down feature can navigate to another view that may hold some different data than the previous one.

Add drill down feature to ASP.NET Chart

The drill-down is a specified area where the clicked the chart navigates to a view with greater detail. User can click on a series in the legend or a chart series item to display another chart with an expanded view of that series or series item.
In this tutorial part, we will show you how to drill down the season data to month data.
First, add a web chart control to your aspx page.


<kettic:KaxChart runat="server" ID="KaxChart1" onclick="KaxChart1_Click" Width="600px">
    </kettic:KaxChart>

Then define the drill down code in the click event by C# code.


protected void KaxChart1_Click(object sender, ChartClickEventArgs e)
        {
            if (e.SeriesItem.Parent.Name == "Seasons")
            {
                this.KaxChart1.Caption.TextArea.Text = "Month Salse";
                int index = e.SeriesItem.Index;
                string season = seasons[index];
                this.KaxChart1.SeriesSet.Clear();
                ChartSeries series = new ChartSeries();
                series.Name = "Months";
                this.KaxChart1.SeriesSet.Add(series);
                this.KaxChart1.SeriesSet[0].DataValueField = "Salse";
                this.KaxChart1.SeriesSet[0].Diagram.AxisX.DataLabelsField = "MonthLable";
                this.KaxChart1.DataSource = this.GetMohthData(season);
                this.KaxChart1.DataBind();
            }
            else if (e.SeriesItem.Parent.Name == "Months")
            {
                this.KaxChart1.Caption.TextArea.Text = " One Third Month Salse";
                this.KaxChart1.SeriesSet.Clear();
                ChartSeries series = new ChartSeries();
                series.Name = "One Third Month";
                this.KaxChart1.SeriesSet.Add(series);
                double salesValue = e.SeriesItem.Value;
                this.KaxChart1.SeriesSet[0].DataValueField = "Salse";
                this.KaxChart1.SeriesSet[0].Diagram.AxisX.DataLabelsField = "OneThirdMonthLable";
                DataTable table = this.GetOneThirdMonthData(salesValue);
                this.KaxChart1.DataSource = table;
                this.KaxChart1.DataBind();
            }
        }