Stacked Bar Chart , Group Store Data

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

The example stacked bar chart example
https://examples4.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

Code:

---

<%@ 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>

---

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:

Code:

---

<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!

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?

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?