What's New?

[OPEN] [#217] Highlighting an item without highlighting the entire line

  1. #1
    Apr 23, 2013, 8:51 AM

    [OPEN] [#217] Highlighting an item without highlighting the entire line

    Hi,

    When I'm trying to display charts that have an item highlighted on mouseover it automaticly changes the entire line. See example:
    Click image for larger version.  Name: chart example.jpg  Views: 24  Size: 13.7 KB  ID: 6083
    The top chart item does have the highlight I want. But the rest of the line is bigger than the line in the graph below it.(How it originally looks)

    Here is my source for the chart

                    lineTips.Renderer.Fn = "LineTipRenderer"; 
                var hightlightConfig = new SpriteAttributes { Size = 5, Radius = 5, StrokeWidth = 5, Width = 1, Fill = "red" };
                var serie = new LineSeries
                    {
                        SeriesID = id + "Series" + counter,
                        Axis = Position.Left,
                        XField = new[] { x },
                        YField = new[] { series },
                        ShowMarkers = true,
                        Highlight = false,    
                        HighlightConfig = hightlightConfig,
                        Fill = false,
                        ShowInLegend = true,
                        Tips = lineTips,
                        SelectionTolerance = 5,
                        MarkerConfig =
                            new SpriteAttributes 
                            {
                                Type = SpriteType.Circle, 
                                Radius = 0, 
                                Size = 0,
                                Cursor = "pointer"
                            },
                        Title = seriesLabel
                    };
    function LineTipRenderer(si, item)
{
    item.series.highlightItem(item);
    this.setTitle('<span style=\"color:' + item.series.seriesStyle.fill + '\">' + item.series.title + ': ' + si.data[item.series.yField] + '</span><br />' + si.data["X"]);
}
    Is it possible to only display the highlight on the item without highlighting the entire line?

    Thank you,

    MWM2
    Last edited by Daniil; Apr 25, 2013 at 4:21 AM. Reason: [OPEN] [#217]
  2. #2
    Apr 23, 2013, 10:33 AM
    Hi @MWM2Dev,

    There is no such a built-in option.

    I can suggest the following solution, see CustomConfig and the page's <head>.

    Example
    <%@ 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)
        {
            Store s = this.Chart1.GetStore();
            s.DataSource = new object[]
            {
                new 
                {
                    x = 0,
                    y = 0  
                },
                new 
                {
                    x = 50,
                    y = 50  
                },
                new 
                {
                    x = 100,
                    y = 100   
                }
            };
            s.DataBind();
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        Ext.chart.series.Line.override({
            highlightItem: function() {
                var me = this,
                    line = me.line;
                
                Ext.chart.series.Line.superclass.highlightItem.apply(this, arguments);
                if (line && !me.highlighted && me.highlightLine !== false) { // added the third condition 
                    if (!('__strokeWidth' in line)) {
                        line.__strokeWidth = parseFloat(line.attr['stroke-width']) || 0;
                    }
                    if (line.__anim) {
                        line.__anim.paused = true;
                    }
            
                    line.__anim = new Ext.fx.Anim({
                        target: line,
                        to: {
                            'stroke-width': line.__strokeWidth + 3
                        }
                    });
                    me.highlighted = true;
                }
            }
        });
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Chart 
            ID="Chart1" 
            runat="server" 
            Width="400" 
            Height="400">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="x" />
                                <ext:ModelField Name="y" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <Axes>
                <ext:NumericAxis Title="X" Fields="x" Position="Bottom" />
                <ext:NumericAxis Title="Y" Fields="y" Position="Left" />
            </Axes>
            <Series>
                <ext:LineSeries 
                    Titles="Chart" 
                    XField="x" 
                    YField="y"
                    Highlight="true">
                    <CustomConfig>
                        <ext:ConfigItem Name="highlightLine" Value="false" Mode="Raw" />
                    </CustomConfig>
                </ext:LineSeries>
            </Series>
        </ext:Chart>
    </form>
</body>
</html>
    I reported it to Sencha as a feature request.
    http://www.sencha.com/forum/showthread.php?262037
    Last edited by Daniil; Apr 23, 2013 at 10:57 AM.
  3. #3
    Apr 24, 2013, 9:23 AM
    Thank you very much. This work around did solve my problem.

    Kind regards,

    MWM2
  4. #4
    Apr 25, 2013, 4:19 AM
    Sencha opened a ticket.

    We created an Issue to track it.
    https://github.com/extnet/Ext.NET/issues/217

    By the way, you might be interested to provide some feedback on this one.
    http://www.sencha.com/forum/showthre...031#post960858

Similar Threads

  1. Extension for RAZOR highlighting and folding
    By RaptorBlood in forum 2.x Help
    Replies: 0
    Last Post: Feb 06, 2013, 7:59 AM
  2. [CLOSED] Highlighting an item in MultiSelect
    By vadym.f in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Feb 03, 2013, 12:12 AM
  3. [CLOSED] [1.0] GridPanel and highlighting
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Nov 17, 2010, 10:30 PM
  4. [CLOSED] Highlighting a stand-alone image (lie a GridCommand)
    By r_honey in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Mar 15, 2010, 3:24 PM
  5. Stop Rows from Highlighting on Selection
    By Juls in forum 1.x Help
    Replies: 4
    Last Post: Apr 17, 2009, 5:36 PM

Posting Permissions