PDA

View Full Version : [CLOSED] How to achieve column stacked chart?



feanor91
May 29, 2012, 8:29 AM
Please delete this thread, I forgot the stacked parameter....

Hello

I need this kind of chart:

4294

In Ext.JS I do that :


var ATSChart= Ext.create('Ext.chart.Chart', {
animate: true,
store: stoATS,
theme: 'Browser',
shadow: false,
listeners: {
click: function () {
positionWindow(winATSChart);
winATSChart.show();
}
},
background: {
fill: '#ddd'
},
legend: {
position: 'right',
labelFont: '8px Verdana',

boxStroke: '#ddd',
boxFill: '#ddd'
},
axes: [
{
type: 'Numeric',
position: 'left',
fields: ['# repair', '# loans', '# device exchange', '# device Investigated'],
label: {
renderer: Ext.util.Format.numberRenderer('0')
},
grid: true,
minimum: 0
},
{
type: 'Category',
position: 'bottom',
fields: ['month'],
//title: 'Activity time split',
label: {
renderer: Ext.util.Format.dateRenderer('M'),
rotate: {
degrees: 270
}
}
}
],
series: [
{
type: 'column',
axis: 'left',
gutter: 80,
xField: 'month',
yField: ['# repair', '# loans', '# device exchange', '# device Investigated'],
stacked: true,
tips:
{
trackMouse: true,
width: 580,
height: 170,
layout: 'fit',
items: {
xtype: 'container',
layout: 'fit',
items: [panTipATS]
},
renderer: function (klass, item) {

var storeItem = item.storeItem;
var srt_month = storeItem.get('month');
var dat_DateToCompute = new Date(srt_month.split('/')[2], (parseFloat(srt_month.split('/')[0]) - 1).toString(), srt_month.split('/')[1]);
var month = computeMonth(dat_DateToCompute.getMonth());
var year = dat_DateToCompute.getFullYear();

var index = 0;

for (var i = 0; i < ATSChart.legend.items.length; i++) {
if (item.attr.fill == ATSChart.legend.items[i].items[1].attr.fill) {
index = i;
break;
}
}

var tips1 = "Target:";
var tips2 = "";
var tips3 = "\r\n";

switch (item.series.yField[index]) {
case '# repair':
tips1 += storeItem.get('# repair target') + "\r\n";
tips2 += storeItem.get('BOOL_Estimated_ATS_Repair') ? "Measured value" : "Estimated value";
tips3 = "\r\n" + storeItem.get('# repair comment');
break;
case '# loans':
tips1 += storeItem.get('# loans target') + "\r\n";
tips2 += storeItem.get('BOOL_Estimated_ATS_Loans') ? "Measured value" : "Estimated value";
tips3 = "\r\n" + storeItem.get('# loans comment');
break;
case '# device exchange':
tips1 += storeItem.get('# device exchange target') + "\r\n";
tips2 += storeItem.get('BOOL_Estimated_ATS_DeviceExchange') ? "Measured value" : "Estimated value";
tips3 = "\r\n" + storeItem.get('# device exchange comment');
break;
case '# device Investigated':
tips1 += storeItem.get('# device Investigated target') + "\r\n";
tips2 += storeItem.get('BOOL_Estimated_ATS_DeviceInvestigat ed') ? "Measured value" : "Estimated value";
tips3 = "\r\n" + storeItem.get('# device Investigated comment');
break;
}

this.setTitle(month + " " + year + ", value:" + String(item.value[1]));
txtCommentTipATS.setRawValue(tips1 + tips2 + tips3);

}
}
}
]
});


The point to obtain that is:


yField: ['# repair', '# loans', '# device exchange', '# device Investigated'],


So I try in Ext.net:



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new object[]
{
new object[] {1,10,200,550},
new object[] {2,15,300,450},
new object[] {3,21,452,800},
new object[] {4,1,125,952},
new object[] {5,18,214,458},
new object[] {6,30,57,480},
new object[] {7,25,38,452},
new object[] {8,14,189,650},
new object[] {9,11,170,520},
new object[] {10,9,98,152},
new object[] {11,3,78,259},
new object[] {12,45,120,454}
};
this.Store1.DataBind();
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" />

<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Month" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
<ext:ModelField Name="Value3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:Window ID="Window1"
runat="server"
Height="400"
Width="300"
Layout="FitLayout">
<Items>
<ext:Chart ID="Chart1" runat="server" StoreID="Store1" Legend="true">
<Axes>
<ext:CategoryAxis Title="Month" Fields="Month" />
<ext:NumericAxis Fields="Value1,Value2,Value3" />
</Axes>
<Series>
<ext:ColumnSeries
Axis="Left"
XField="Month"
YField="Value1, Value2, Value3" />
</Series>
</ext:Chart>
</Items>
</ext:Window>
</body>
</html>

But I get column sibe by side and not stacked.

I try with 3 series to see the difference, but it di not work at all, all series seemed to be melted in one, or something like that.

So, how to achieve that?

Subsidiary question : I will need to change title of eache value too (to not have to use mapping in my Store).