PDA

View Full Version : [CLOSED] Customize label in stacked columns chart



Svr77
Nov 23, 2013, 10:27 AM
Hello,

I have a graphic which is displayed as a stacked column chart and need to display labels in the following way:

1) When both series (allocated and non allocated offers) are selected than label should display summary of these series. Thus for the first column I need to display not two labels but only one as a summary (4768+5751 = 10,519). Label should be on the top of each bar
2) When allocated offers are selected I need to display only values of allocated offers
3) When the same for non allocated offers

I know that I can use Renderer for label to provide custom message, but it has a lack of parameters only value to be displayed. How I can determinate that in case of #1 I don't need to show allocated offer but just summarize it together with non allocated and display this result? See attached image and code. Hope I was clear :-)

7260


<ext:Chart runat="server" Shadow="true" StyleSpec="background:#fff" Animate="true" Flex="1">
<Listeners>
<%--AfterRender Handler="AfterChartRender(item);"></--AfterRender--%>
</Listeners>
<Store>
<ext:Store runat="server" AutoDataBind="true" AutoLoad="true">
<Proxy>
<ext:AjaxProxy Url="/Analysis/GetScenarioResultsOverview">
<Reader>
<ext:JsonReader TotalProperty="total" Root="data" IDProperty="carrierId" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<AutoLoadParams>
<ext:Parameter Name="ScenarioId" Value="<%# Model.ScenarioId %>" Mode="Value" AutoDataBind="true" />
<ext:Parameter Name="TenderId" Value="<%# Model.TenderId %>" Mode="Value" AutoDataBind="true" />
</AutoLoadParams>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="carrierId" Mapping="CarrierId" />
<ext:ModelField Name="carrierName" Mapping="CarrierName" />
<ext:ModelField Name="completeOffer" Type="Float" Mapping="CompleteOffer" />
<ext:ModelField Name="allocationOffer" Type="Float" Mapping="AllocationOffer" />
<ext:ModelField Name="nonAllocatedOffer" Type="Float">
<Convert Handler="return record.get('completeOffer') - record.get('allocationOffer');" />
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Property="Total" Direction="DESC" />
</Sorters>
<Listeners>
<%--Load Handler="ChartStoreLoad(store, records, successful);"></Load--%>
</Listeners>
</ext:Store>
</Store>
<LegendConfig Position="Bottom" />
<Axes>
<ext:NumericAxis Fields="allocationOffer, nonAllocatedOffer" Grid="true">
<Label>
<%--Renderer Handler="return RenderNumericAxis(value);" /--%>
</Label>
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="carrierName" />
</Axes>
<Series>
<ext:ColumnSeries Axis="Left" Highlight="true" XField="carrierName" YField="allocationOffer, nonAllocatedOffer" Titles="Allocated Offers,Not allocated offers" Stacked="true">
<Tips runat="server" TrackMouse="true" Width="140" Height="28">
<Renderer Handler="this.setTitle(String(item.value[1]) + 'M');" />
</Tips>
<Label Display="Over" Orientation="Vertical" Color="#333" TextAnchor="middle" Field="allocationOffer, nonAllocatedOffer">
<%--Renderer Handler="return 'debugger';" /--%>
</Label>
</ext:ColumnSeries>
</Series>
</ext:Chart>

Baidaly
Nov 24, 2013, 3:25 AM
Hello!

Sorry, what do you mean by when both series are selected? You mean, when all of them are visible or when a column contains only one type of offers?

Svr77
Nov 24, 2013, 10:32 AM
Hello!

Sorry, what do you mean by when both series are selected? You mean, when all of them are visible or when a column contains only one type of offers?

I mean that when I see green and blue bars, I don't want to show values separately for each bur but need to summarize them and show on the top of bar.

Baidaly
Nov 25, 2013, 12:54 AM
Take a look at the following sample:


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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
public List<object> Data
{
get
{
return new List<object>
{
new {Year = 2005, Comedy = 34000000, Action = 23890000, Drama = 18450000, Thriller = 20060000},
new {Year = 2006, Comedy = 56703000, Action = 38900000, Drama = 12650000, Thriller = 21000000},
new {Year = 2007, Comedy = 42100000, Action = 50410000, Drama = 25780000, Thriller = 23040000},
new {Year = 2008, Comedy = 38910000, Action = 56070000, Drama = 24810000, Thriller = 26940000}
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Column Chart - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />

<script>
var saveChart = function (btn) {
Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
if(choice == 'yes'){
btn.up('panel').down('chart').save({
type: 'image/png'
});
}
});
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" SourceFormatting="true" ScriptMode="Debug" InitScriptMode="Inline" />

<h1>Column Chart Sample</h1>

<p>Display a sets of random data in a column series. Reload data will randomly generate a new set of data in the store.</p>

<ext:Panel
runat="server"
Title="Column Chart"
Width="800"
Height="600"
Layout="FitLayout">
<Items>
<ext:Chart
ID="Chart1"
runat="server"
Shadow="true"
StyleSpec="background:#fff"
Animate="true">
<Store>
<ext:Store
runat="server"
Data="<%# Data %>"
AutoDataBind="true">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Year" />
<ext:ModelField Name="Comedy" />
<ext:ModelField Name="Action" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<Axes>
<ext:NumericAxis
Fields="Comedy,Action"
Grid="true"
Minimum="0">
<Label>
<Renderer Handler="return String(value).replace(/000000$/, 'M');" />
</Label>
</ext:NumericAxis>

<ext:CategoryAxis
Position="Bottom"
Fields="Year"
Title="Year"
/>
</Axes>
<Series>
<ext:ColumnSeries
Axis="Left"
Highlight="true"
XField="Year"
YField="Comedy,Action"
Stacked="true">
<Tips runat="server" TrackMouse="true" Width="140" Height="28">
<Renderer Handler="this.setTitle(String(item.value[1] / 1000000) + 'M');" />
</Tips>
<Label
Display="InsideEnd"
Field="Comedy,Action"
Orientation="Horizontal"
Color="#333"
TextAnchor="middle" >
<Renderer Handler="
if (item.yField == 'Comedy' && storeItem.get('Action') == 0)
return Ext.util.Format.number(value, '0');

if (item.yField == 'Comedy' && storeItem.get('Action') > 0)
return '';

if (item.yField == 'Action')
return Ext.util.Format.number(value + storeItem.get('Comedy'), '0');" />
</Label>
</ext:ColumnSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>