Hi,
I can suggest the following solution.
Example
<%@ 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.Compa nies);
#{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>