Jun 08, 2016, 1:13 PM
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
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
<%@ 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>