[CLOSED] Chart with drilldown capabilities

Hi,

I can suggest the following solution.

Example

Code:

<%@ Page Language="C#" %> <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %> <script runat="server"> class Company { public string Name { get; set; } public int Sales { get; set; } } class ChartData { public string Region { get; set; } public List<Company> Companies { get; set; } public int Sales { get; set; } } protected void Page_Load(object sender, EventArgs e) { if (!X.IsAjaxRequest) { var store = this.Chart1.GetStore(); List<ChartData> charData = new List<ChartData>() { new ChartData() { Region = "West Coast", Companies = new List<Company>() { new Company { Name = "Company A", Sales = 5000 }, new Company { Name = "Company B", Sales = 6000 }, new Company { Name = "Company C", Sales = 7000 } }, Sales = 18000 }, new ChartData() { Region = "East Coast", Companies = new List<Company>() { new Company { Name = "Company A", Sales = 9000 }, new Company { Name = "Company B", Sales = 8000 }, new Company { Name = "Company C", Sales = 7000 } }, Sales = 24000 } }; store.DataSource = charData; store.DataBind(); } } </script> <!DOCTYPE html> <html> <head runat="server"> <title>Ext.NET Example</title> </head> <body> <form runat="server"> <ext:ResourceManager runat="server" /> <ext:Panel ID="Panel1" runat="server" Title="Total Sales" Width="800" Height="600" Layout="CardLayout"> <TopBar> <ext:Toolbar runat="server"> <Items> <ext:Button ID="Button1" runat="server" Text="Go back" Icon="ArrowLeft"> <Listeners> <Click Handler="#{Panel1}.getLayout().setActiveItem(0); #{Panel1}.setTitle('Total Sales'); this.disable();" /> </Listeners> </ext:Button> </Items> </ext:Toolbar> </TopBar> <Items> <ext:Chart ID="Chart1" runat="server" Shadow="true" Animate="true"> <Store> <ext:Store runat="server"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="Region" /> <ext:ModelField Name="Companies" IsComplex="true" /> <ext:ModelField Name="Sales" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <Axes> <ext:NumericAxis Fields="Sales" Title="Sales" Minimum="0" /> <ext:CategoryAxis Fields="Region" Title="Regions" Position="Bottom" /> </Axes> <Series> <ext:ColumnSeries Highlight="true" XField="Regions" YField="Sales"> <Listeners> <ItemMouseUp Handler="var region = item.storeItem.data.Region; #{Panel1}.getLayout().setActiveItem(1); #{Panel1}.setTitle(region + ' Sales'); #{Chart2}.store.loadData(item.storeItem.data.Companies); #{Button1}.enable();" /> </Listeners> </ext:ColumnSeries> </Series> </ext:Chart> <ext:Chart ID="Chart2" runat="server" Shadow="true" Animate="true"> <Store> <ext:Store runat="server"> <Model> <ext:Model runat="server"> <Fields> <ext:ModelField Name="Name" /> <ext:ModelField Name="Sales" /> </Fields> </ext:Model> </Model> </ext:Store> </Store> <Axes> <ext:NumericAxis Fields="Sales" Title="Sales" Minimum="0" /> <ext:CategoryAxis Fields="Name" Title="Companies" Position="Bottom" /> </Axes> <Series> <ext:ColumnSeries Highlight="true" XField="Company" YField="Sales" /> </Series> </ext:Chart> </Items> </ext:Panel> </form> </body> </html>

Region	Company	Sales
West Coast	CompanyA	5000
West Coast	CompanyB	6000
West Coast	CompanyC	7000
East Coast	CompanyA	8000
East Coast	CompanyB	5000
East Coast	CompanyC	4000