[CLOSED] Chart with drilldown capabilities

  1. #1

    [CLOSED] Chart with drilldown capabilities

    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.
    Last edited by Daniil; Jan 20, 2012 at 1:31 PM. Reason: [CLOSED]
  2. #2
    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.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>

Similar Threads

  1. Replies: 2
    Last Post: Aug 13, 2012, 3:12 PM
  2. Replies: 1
    Last Post: Jun 02, 2012, 8:12 AM
  3. [CLOSED] Chart CategoryAxis
    By ddslogistics in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Mar 19, 2012, 11:47 AM
  4. [CLOSED] Chart Control with Ext.Net
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jan 12, 2012, 5:11 PM
  5. [CLOSED] Chart Ext.Net
    By Jurke in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Mar 01, 2011, 8:02 AM

Posting Permissions