PDA

View Full Version : [CLOSED] Chart with drilldown capabilities



jchau
Jan 12, 2012, 5: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, 5: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>