Stacked Bar Chart , Group Store Data

  1. #1

    Stacked Bar Chart , Group Store Data

    How can group my array data to get a stacked bar chart?

    The example stacked bar chart example
    http://examples.ext.net/#/Chart/Bar/Stacked
    shows exactly what I would like to get, but the example data has not the same structure as my data.

    I found old sencha forum entry which has nearly the same question
    https://www.sencha.com/forum/showthr...-Grouped-Store
    but I am unable migrate to the fiddle solution:
    http://jsfiddle.net/existdissolve/dkJb9/
    to asp.net.

    I found a groupField config in store but no further documentation or example if or how this config could be used with a barSeries.

    To reflect my data structure, the following code is a slightly changed version of the original stacked bar chart example.
    May some give me a hint how I can configure the store and the barSeries to get the same results as in the original example without changing my data structure.

    thanks,
    marjot

    <%@ Page Language="C#" %>
    
    <script runat="server">
        public List<object> Data
        {
            get
            {            
                return new List<object>
                {
                    new { Month = "Jan", Data = 20, Browser = "IE" },
                    new { Month = "Feb", Data = 20, Browser = "IE" },
                    new { Month = "Mar", Data = 19, Browser = "IE" },
                    new { Month = "Apr", Data = 18, Browser = "IE" },
                    new { Month = "May", Data = 18, Browser = "IE" },
                    new { Month = "Jun", Data = 17, Browser = "IE" },
                    new { Month = "Jul", Data = 16, Browser = "IE" },
                    new { Month = "Aug", Data = 16, Browser = "IE" },
                    new { Month = "Sep", Data = 16, Browser = "IE" },
                    new { Month = "Oct", Data = 16, Browser = "IE" },
                    new { Month = "Nov", Data = 15, Browser = "IE" },
                    new { Month = "Dec", Data = 15, Browser = "IE" },
                    new { Month = "Jan", Data = 37, Browser = "Firefox" },
                    new { Month = "Feb", Data = 37, Browser = "Firefox" },
                    new { Month = "Mar", Data = 36, Browser = "Firefox" },
                    new { Month = "Apr", Data = 36, Browser = "Firefox" },
                    new { Month = "May", Data = 35, Browser = "Firefox" },
                    new { Month = "Jun", Data = 34, Browser = "Firefox" },
                    new { Month = "Jul", Data = 34, Browser = "Firefox" },
                    new { Month = "Aug", Data = 33, Browser = "Firefox" },
                    new { Month = "Sep", Data = 32, Browser = "Firefox" },
                    new { Month = "Oct", Data = 32, Browser = "Firefox" },
                    new { Month = "Nov", Data = 31, Browser = "Firefox" },
                    new { Month = "Dec", Data = 31, Browser = "Firefox" },
                    new { Month = "Jan", Data = 35, Browser = "Chrome" },
                    new { Month = "Feb", Data = 36, Browser = "Chrome" },
                    new { Month = "Mar", Data = 37, Browser = "Chrome" },
                    new { Month = "Apr", Data = 38, Browser = "Chrome" },
                    new { Month = "May", Data = 39, Browser = "Chrome" },
                    new { Month = "Jun", Data = 42, Browser = "Chrome" },
                    new { Month = "Jul", Data = 43, Browser = "Chrome" },
                    new { Month = "Aug", Data = 44, Browser = "Chrome" },
                    new { Month = "Sep", Data = 44, Browser = "Chrome" },
                    new { Month = "Oct", Data = 45, Browser = "Chrome" },
                    new { Month = "Nov", Data = 46, Browser = "Chrome" },
                    new { Month = "Dec", Data = 47, Browser = "Chrome" },
                    new { Month = "Jan", Data = 4,  Browser = "Safari" },
                    new { Month = "Feb", Data = 5,  Browser = "Safari" },
                    new { Month = "Mar", Data = 4,  Browser = "Safari" },
                    new { Month = "Apr", Data = 5,  Browser = "Safari" },
                    new { Month = "May", Data = 4,  Browser = "Safari" },
                    new { Month = "Jun", Data = 4,  Browser = "Safari" },
                    new { Month = "Jul", Data = 4,  Browser = "Safari" },
                    new { Month = "Aug", Data = 4,  Browser = "Safari" },
                    new { Month = "Sep", Data = 4,  Browser = "Safari" },
                    new { Month = "Oct", Data = 4,  Browser = "Safari" },
                    new { Month = "Nov", Data = 4,  Browser = "Safari" },
                    new { Month = "Dec", Data = 4,  Browser = "Safari" },
    
                };
            }
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Stacked Bar Chart - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Stacked Bar Chart Sample</h1>
    
            <ext:Container
                runat="server"
                Width="800"
                Height="500"
                Layout="FitLayout">
                <Items>
                    <ext:CartesianChart
                        ID="Chart1"
                        runat="server"
                        FlipXY="true"
                        InsetPadding="40">
                        <Store>
                            <ext:Store runat="server" Data="<%# Data %>" AutoDataBind="true">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Month" />
                                            <ext:ModelField Name="Data" />                                        
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
    
                        <LegendConfig Dock="Right" />
    
                        <Axes>
                            <ext:NumericAxis
                                Fields="Data"
                                Position="Bottom"                            
                                Grid="true"
                                AdjustByMajorUnit="true"
                                Minimum="0">
                            </ext:NumericAxis>
    
                            <ext:CategoryAxis Fields="Month" Position="Left" Grid="true" />
                        </Axes>
    
                        <Series>
                            <ext:BarSeries
                                XField="Month"
                                YField="Data"                            
                                Titles="IE,Firefox,Chrome,Safari"
                                Stacked="true">
                            </ext:BarSeries>
                        </Series>
                    </ext:CartesianChart>
                </Items>
            </ext:Container>
        </form>
    </body>
    </html>
  2. #2
    Hello @marjot2112!

    You can't just specify that series type in Ext.NET as that is a custom defined series, user defined, like a ExtJS plug-in that Ext.NET does not know about.

    To use that you would have to define the Ext.chart.series.AutoGroupedColumn in JavaScript and one option to use it in your chart is defining it as a custom config.

    Roughly, something like this:
    <ext:CartesianChart runat="server">
        <CustomConfig>
            <ext:ConfigItem Name="series" Value="[{type: 'autogroupedcolumn',axis: 'left',highlight: true,xField: 'state',yField: 'quantity',gField: 'product'}]" />
        </CustomConfig>
    </ext:CartesianChart>
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Thanks for your help. I will try to implement that.

    I wonder about the fact that this is so complicated in this case and is not better supported. In most cases, the data structure will be similar to my data example, if the data comes from a database query.

    Are there any other simpler solutions that I overlooked?
  4. #4
    The solution
    http://jsfiddle.net/existdissolve/dkJb9/
    is based on ext.js 4.x and won't work with 6.x since the defined AutoGroupedColumn extends Ext.chart.series.Column which does not exists in 6.x.

    Any other simple solutions to get my data into a stacked bar chart?

Similar Threads

  1. Stacked colum chart Problem
    By PatrickHerron in forum 3.x Help
    Replies: 0
    Last Post: Apr 21, 2016, 11:59 AM
  2. Chart columseries Stacked
    By adan in forum 2.x Help
    Replies: 3
    Last Post: Mar 15, 2016, 9:39 PM
  3. Replies: 2
    Last Post: Jul 07, 2015, 11:53 PM
  4. Replies: 5
    Last Post: Mar 11, 2014, 4:03 PM
  5. [CLOSED] MVC - Stacked Column Chart
    By immenso in forum 2.x Premium Help
    Replies: 3
    Last Post: Oct 09, 2013, 4:35 PM

Tags for this Thread

Posting Permissions