[OPEN] [#227] Scatter series label problem

  1. #1

    [OPEN] [#227] Scatter series label problem

    Hello,

    Please investigate the code below. Series labels are not rendered correctly. If I disable the store field converter, it is rendered correctly but empty values are also rendered on the chart (which I do not want).

    Figure: Click image for larger version. 

Name:	scatterserieslabel.png 
Views:	24 
Size:	62.9 KB 
ID:	6136

    Code:
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.DataSource = this.TestData();
                this.Store1.DataBind();
            }
        }
        private List<object> TestData()
        {
            List<object> data = new List<object>
                {
                    new {
                            ID = 0,
                            Name = "Item 01",
                            XVal = 1,
                            Data1 = 1,
                            Data2 = "",
                            Data3 = ""
                        },
                    new {
                            ID = 1,
                            Name = "Item 02",
                            XVal = 2,
                            Data1 = 2,
                            Data2 = "",
                            Data3 = ""                        
                        },
                    new {
                            ID = 2,
                            Name = "Item 03",
                            XVal = 3,
                            Data2 = 3,
                            Data1 = "",
                            Data3 = ""                       
                        },
                    new {
                            ID = 3,
                            Name = "Item 04",
                            XVal = 4,
                            Data2 = 4,
                            Data1 = "",
                            Data3 = ""                        
                        },
                    new {
                            ID = 4,
                            Name = "Item 05",
                            XVal = 5,
                            Data3 = 5,
                            Data1 = "",
                            Data2 = ""                        
                        },
                    new {
                            ID = 5,
                            Name = "Item 06",
                            XVal = 6,
                            Data3 = 6,
                            Data1 = "",
                            Data2 = ""                        
                        }                        
                };
            return data;
        }
    </script>
    <script type="text/javascript">
    </script>
    
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Scatter Series Labels</title>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />    
        <ext:Panel ID="Panel1" runat="server" Width="800" Height="500" Layout="FitLayout">        
            <Items>            
                <ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Animate="false" Flex="1" Legend="true">
                    <Store>
                        <ext:Store ID="Store1" runat="server">
                            <Model>
                                <ext:Model ID="Model1" runat="server" IDProperty="ID">
                                    <Fields>
                                        <ext:ModelField Name="ID" Type="Int" />
                                        <ext:ModelField Name="XVal" Type="Int" />
                                        <ext:ModelField Name="Name" Type="String" />
                                        <ext:ModelField Name="Data1" Type="Int">
                                            <Convert Handler="if(value==''){value=undefined;} return value;"></Convert>
                                        </ext:ModelField>
                                        <ext:ModelField Name="Data2" Type="Int">
                                            <Convert Handler="if(value==''){value=undefined;} return value;"></Convert>                                    
                                        </ext:ModelField>
                                        <ext:ModelField Name="Data3" Type="Int">
                                            <Convert Handler="if(value==''){value=undefined;} return value;"></Convert>                                    
                                        </ext:ModelField>
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Axes>
                        <ext:NumericAxis Title="Vaue Y" Fields="Data1,Data2,Data3" Position="Left" Minimum="0" Maximum="10">                                         
                        </ext:NumericAxis>
                        <ext:NumericAxis Title="Value X" Position="Bottom" Minimum="0" Maximum="10">                                                                   
                        </ext:NumericAxis>
                    </Axes>
                    <Series>
                        <ext:ScatterSeries Axis="Bottom" XField="XVal" YField="Data1">
                            <MarkerConfig Type="Circle" Radius="7" Size="7" />
                            <HighlightConfig Size="10" Radius="10" />      
                            <Label Display="Over" Field="Name" Orientation="Horizontal" FontSize="10"></Label>         
                            <Tips TrackMouse="true" Width="100">
                                <Renderer Handler="this.setTitle(storeItem.data.Name);"></Renderer>
                            </Tips>     
                        </ext:ScatterSeries>
                        <ext:ScatterSeries Axis="Bottom" XField="XVal" YField="Data2">
                            <MarkerConfig Type="Cross" Radius="7" Size="7" />
                            <HighlightConfig Size="10" Radius="10" />      
                            <Label Display="Over" Field="Name" Orientation="Horizontal" FontSize="10"></Label>
                            <Tips TrackMouse="true" Width="100">
                                <Renderer Handler="this.setTitle(storeItem.data.Name);"></Renderer>
                            </Tips>    
                        </ext:ScatterSeries>
                        <ext:ScatterSeries Axis="Bottom" XField="XVal" YField="Data3">
                            <MarkerConfig Type="Diamond" Radius="7" Size="7" />
                            <HighlightConfig Size="10" Radius="10" />                      
                            <Label Display="Over" Field="Name" Orientation="Horizontal" FontSize="10"></Label>
                            <Tips TrackMouse="true" Width="100">
                                <Renderer Handler="this.setTitle(storeItem.data.Name);"></Renderer>
                            </Tips>    
                        </ext:ScatterSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; May 03, 2013 at 4:45 AM. Reason: [OPEN] [#227]
  2. #2
    Hi @bayoglu,

    Thank you for the report. I reported to Sencha.
    http://www.sencha.com/forum/showthread.php?262720

    I will try to come up with a fix/workaround.
  3. #3
    Thank you Daniil. Looking forward to the workaround.

    Thanks.
  4. #4
    Please try the following.

    Tested with Scatter and Line series.

    Fix
    Ext.chart.series.Series.override({
        renderLabels: function () {
            var me = this,
                chart = me.chart,
                gradients = chart.gradients,
                items = me.items,
                animate = chart.animate,
                config = me.label,
                display = config.display,
                stackedDisplay = config.stackedDisplay,
                format = config.renderer,
                color = config.color,
                field = [].concat(config.field),
                group = me.labelsGroup,
                groupLength = (group || 0) && group.length,
                store = me.chart.getChartStore(),
                len = store.getCount(),
                itemLength = (items || 0) && items.length,
                ratio = itemLength / len,
                gradientsCount = (gradients || 0) && gradients.length,
                Color = Ext.draw.Color,
                hides = [],
                gradient, i, count, groupIndex, index, j, k, colorStopTotal, colorStopIndex, colorStop, item, label,
                storeItem, sprite, spriteColor, spriteBrightness, labelColor, colorString,
                total, totalPositive, totalNegative, topText, bottomText;
    
            if (display == 'none') {
                return;
            }
            // no items displayed, hide all labels
            if (itemLength == 0) {
                while (groupLength--) {
                    hides.push(groupLength);
                }
            } else {
                for (i = 0, count = 0, groupIndex = 0; i < len; i++) {
                    index = 0;
                    for (j = 0; j < ratio; j++) {
                        item = items[count];
                        label = group.getAt(groupIndex);
                        storeItem = item && item.storeItem; //storeItem = store.getAt(i); - replaced
                        //check the excludes
                        while (this.__excludes && this.__excludes[index]) {
                            index++;
                        }
    
                        if (!item && label) {
                            label.hide(true);
                            groupIndex++;
                        }
    
                        if (item && field[j]) {
                            if (!label) {
                                label = me.onCreateLabel(storeItem, item, i, display);
                            }
                            me.onPlaceLabel(label, storeItem, item, i, display, animate, index);
                            groupIndex++;
    
                            //set contrast
                            if (config.contrast && item.sprite) {
                                sprite = item.sprite;
                                //set the color string to the color to be set, only read the
                                // _endStyle/_to if we're animating, otherwise they're not relevant
                                if (animate && sprite._endStyle) {
                                    colorString = sprite._endStyle.fill;
                                } else if (animate && sprite._to) {
                                    colorString = sprite._to.fill;
                                } else {
                                    colorString = sprite.attr.fill;
                                }
                                colorString = colorString || sprite.attr.fill;
    
                                spriteColor = Color.fromString(colorString);
                                //color wasn't parsed property maybe because it's a gradient id
                                if (colorString && !spriteColor) {
                                    colorString = colorString.match(me.colorStringRe)[1];
                                    for (k = 0; k < gradientsCount; k++) {
                                        gradient = gradients[k];
                                        if (gradient.id == colorString) {
                                            //avg color stops
                                            colorStop = 0;
                                            colorStopTotal = 0;
                                            for (colorStopIndex in gradient.stops) {
                                                colorStop++;
                                                colorStopTotal += Color.fromString(gradient.stops[colorStopIndex].color).getGrayscale();
                                            }
                                            spriteBrightness = (colorStopTotal / colorStop) / 255;
                                            break;
                                        }
                                    }
                                } else {
                                    spriteBrightness = spriteColor.getGrayscale() / 255;
                                }
                                if (label.isOutside) {
                                    spriteBrightness = 1;
                                }
                                labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
                                labelColor[2] = spriteBrightness > 0.5 ? 0.2 : 0.8;
                                label.setAttributes({
                                    fill: String(Color.fromHSL.apply({}, labelColor))
                                }, true);
                            }
    
                            // display totals on stacked charts
                            if (me.stacked && stackedDisplay && (item.totalPositiveValues || item.totalNegativeValues)) {
                                totalPositive = (item.totalPositiveValues || 0);
                                totalNegative = (item.totalNegativeValues || 0);
                                total = totalPositive + totalNegative;
    
                                if (stackedDisplay == 'total') {
                                    topText = format(total);
                                } else if (stackedDisplay == 'balances') {
                                    if (totalPositive == 0 && totalNegative == 0) {
                                        topText = format(0);
                                    } else {
                                        topText = format(totalPositive);
                                        bottomText = format(totalNegative);
                                    }
                                }
    
                                if (topText) {
                                    label = group.getAt(groupIndex);
                                    if (!label) {
                                        label = me.onCreateLabel(storeItem, item, i, 'over');
                                    }
                                    label.setAttributes({
                                        text: topText
                                    });
                                    me.onPlaceLabel(label, storeItem, item, i, 'over', animate, index);
                                    groupIndex++;
    
                                    labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
                                    label.setAttributes({
                                        fill: String(Color.fromHSL.apply({}, labelColor))
                                    }, true);
                                }
    
                                if (bottomText) {
                                    label = group.getAt(groupIndex);
                                    if (!label) {
                                        label = me.onCreateLabel(storeItem, item, i, 'under');
                                    }
                                    label.setAttributes({
                                        text: bottomText
                                    });
                                    me.onPlaceLabel(label, storeItem, item, i, 'under', animate, index);
                                    groupIndex++;
    
                                    labelColor = Color.fromString(label.attr.color || label.attr.fill).getHSL();
                                    label.setAttributes({
                                        fill: String(Color.fromHSL.apply({}, labelColor))
                                    }, true);
                                }
                            }
                        }
                        count++;
                        index++;
                    }
                }
                groupLength = group.length;
    
                while (groupLength > groupIndex) {
                    hides.push(groupIndex);
                    groupIndex++;
                }
            }
            me.hideLabels(hides);
        }    
    });
    Created an Issue to track this defect.
    https://github.com/extnet/Ext.NET/issues/227
    Last edited by Daniil; May 03, 2013 at 4:44 AM.
  5. #5
    It works great. Thank you for the work-around Daniil.

Similar Threads

  1. [CLOSED] Scatter Graph
    By Tonic in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 04, 2013, 5:50 AM
  2. FieldLabel in label problem!!
    By buihoanghai in forum 1.x Help
    Replies: 1
    Last Post: Oct 15, 2012, 6:04 AM
  3. Problem with set Html in Label
    By manhhoangxuan in forum 1.x Help
    Replies: 12
    Last Post: Mar 29, 2012, 10:32 PM
  4. [CLOSED] Label width problem
    By caha76 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 22, 2011, 2:59 PM
  5. [CLOSED] Label.FieldLabel problem
    By alexp in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 17, 2009, 8:31 AM

Posting Permissions