[OPEN] [#68] Preventing the legend from toggling the visibilty of series in a stacked bar / stacked column chart

  1. #1

    [OPEN] [#68] Preventing the legend from toggling the visibilty of series in a stacked bar / stacked column chart

    Hi, we have a stack bar char with legend. By default clicking on the legend item for a series toggles the visibility of the series. How can this feature be disabled
    Last edited by Daniil; Jan 21, 2013 at 6:14 AM. Reason: [OPEN] [#68]
  2. #2
    Hello!

    Unfortunately, chart legend doesn't have parameter to disable this behavior. However, you can try to disable them by listening AfterRender event of series:

    <%@ 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>Stacked Bar Chart - Ext.NET Examples</title>
        <script>
            function barRenderer(sprite, record, attr, index, store) {
                return Ext.apply(attr, {
                    fill: 'rgb(' + getRandomInt(0, 255) + ', ' + getRandomInt(0, 255) + ', ' + getRandomInt(0, 255) + ')'
                });
            }
            
            function getRandomInt(min, max)
            {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }
            
            function disableToggleHandler() {
                Ext.each(this.chart.legend.items, function(item) {
                    item.un("mousedown", item.events.mousedown.listeners[0].fn);
                });
            }
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" SourceFormatting="True" ScriptMode="Debug" />
    
            <h1>Stacked Bar Chart Sample</h1>
    
            <p>Showing movie taking by genre as a stacked bar chart sample. Filter the stacks by clicking on the legend items.</p>
    
            <ext:Panel 
                runat="server"
                Width="800"
                Height="400"
                Title="Stacked Bar Chart - Movies by Genre"
                Layout="FitLayout">
                <Items>
                    <ext:Chart 
                        ID="Chart1"
                        runat="server"
                        Shadow="true"
                        Animate="true">
                        <Store>
                            <ext:Store 
                                runat="server" 
                                Data="<%# Data %>" 
                                AutoDataBind="true">                           
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Year" />
                                            <ext:ModelField Name="Comedy" />
                                            <ext:ModelField Name="Action" />
                                            <ext:ModelField Name="Drama" />
                                            <ext:ModelField Name="Thriller" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
    
                        <LegendConfig Position="Right" />
    
                        <Axes>
                            <ext:NumericAxis                             
                                Fields="Comedy,Action,Drama,Thriller"
                                Position="Bottom"
                                Grid="true"
                                RoundToDecimal="false">
                                <Label>
                                    <Renderer Handler="return String(value).replace(/000000$/, 'M');" />
                                </Label>
                            </ext:NumericAxis>                            
    
                            <ext:CategoryAxis Fields="Year" />                            
                        </Axes>
    
                        <Series>
                            <ext:BarSeries 
                                Axis="Bottom"
                                Gutter="80"
                                XField="Year" 
                                YField="Comedy,Action,Drama,Thriller"
                                Stacked="true">
                                <Tips TrackMouse="true" Width="65" Height="28">
                                    <Renderer Handler="this.setTitle(String(item.value[1] / 1000000) + 'M');" />
                                </Tips>
                                <Renderer Fn="barRenderer" />
                                <Listeners>
                                    <AfterRender Fn="disableToggleHandler"></AfterRender>
                                </Listeners>
                            </ext:BarSeries>
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>    
    </body>
    </html>
  3. #3
    Hi,

    I asked it on the Sencha forum.
    http://www.sencha.com/forum/showthread.php?250254

    Opened an Issue to track this feature request.
    https://github.com/extnet/Ext.NET/issues/68
    Last edited by Daniil; Nov 29, 2012 at 6:11 AM.
  4. #4
    Thank you. The code worked
  5. #5
    Sencha opened a Feature ticket.
  6. #6
    It appears that the disableToggleHandler no longer works with v2.5, at least.

    I didn't not investigate why, but came up with this solution.
    Ext.define("MyOverrides", {
        override: "Ext.chart.LegendItem",
        onMouseDown: Ext.emptyFn
    });

Similar Threads

  1. [OPEN] [#77] Chart legend problems with large amount of series
    By MWM2Dev in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Dec 21, 2012, 4:23 AM
  2. Stacked chart with Sqldatasource doesn't load
    By collegeminer in forum 2.x Help
    Replies: 0
    Last Post: Aug 13, 2012, 11:37 PM
  3. [CLOSED] Perhaps a bug in stacked column chart
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 11
    Last Post: Jul 23, 2012, 8:19 AM
  4. [CLOSED] How to achieve column stacked chart?
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 0
    Last Post: May 29, 2012, 8:29 AM
  5. Replies: 5
    Last Post: Sep 29, 2011, 10:04 AM

Tags for this Thread

Posting Permissions