View Full Version : [CLOSED] Chart with drilldown capabilities
jchau
Jan 12, 2012, 6:28 PM
It would be great if you can include an example in Examples Explorer for a chart with drilldown capabilities. By drilldown, I mean ability to catch the click event on a bar to change the chart to show detailed info.
Image this dataset:
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
The chart will initially show West and East Coast on X-Axis with their aggregated sales. When you click on West Coast, it will replace X-Axis with CompanyA, B, C and their respective Sales. Of course there will be a back button to go back to Region view.
Daniil
Jan 15, 2012, 6:09 AM
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>
Powered by vBulletin® Version 4.2.3 Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.