[CLOSED] Customize label in stacked columns chart

[Svr77]

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 :-)

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

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]

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]

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>