[FIXED] [#891] [2.5.4] Line series are not highlighted in IE8/IE9 when user mouse over on legend. It works in FF, Chrome

  1. #1

    [FIXED] [#891] [2.5.4] Line series are not highlighted in IE8/IE9 when user mouse over on legend. It works in FF, Chrome

    HI Daniil

    Line series are not highlighted properly in IE8/IE9 when user mouseover on legend but its working in FF, Chrome

    Please find the screenshot and code for it.

    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Collections.Generic" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="Ext.Net" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server"> 
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                try
                {
                    ddlCpiSpiChartScale.SetValue("3");
                    BindRecords();
                }
                catch (System.Data.SqlClient.SqlException ex)
                {
                    string strin = ex.ToString();
                }
            }
        }
    
        public void BindRecords()
        {
            DataTable dtSpiCpi = new DataTable();
            dtSpiCpi.Locale = System.Globalization.CultureInfo.InvariantCulture;
            dtSpiCpi.Columns.Add("DateName", typeof(string));
            dtSpiCpi.Columns.Add("Column1", typeof(decimal));
            dtSpiCpi.Columns.Add("Column2", typeof(decimal));
            dtSpiCpi.Columns.Add("Column3", typeof(decimal));
            dtSpiCpi.Columns.Add("Column4", typeof(decimal));
    
            DataRow objRow = null;
    
            for (int index = 1; index <= 12; index++)
            {
                objRow = dtSpiCpi.NewRow();
                objRow["DateName"] = index + "Jan15";
    
                if (index < 3)
                {
                    objRow["Column1"] = Convert.ToDecimal("2.50");
                    objRow["Column3"] = Convert.ToDecimal("2.10");
                    objRow["Column4"] = Convert.ToDecimal("2.00");
                    objRow["Column2"] = Convert.ToDecimal("1.0");
                }
                else if (index < 5)
                {
                    objRow["Column1"] = Convert.ToDecimal("1.0");
                    objRow["Column2"] = Convert.ToDecimal("2.0");
                    //objRow["Column3"] = Convert.ToDecimal("3.0");
                    objRow["Column4"] = Convert.ToDecimal("4.0");
                }
                else if (index < 7)
                {
                    //objRow["Column1"] = Convert.ToDecimal("9.0");
                    objRow["Column2"] = Convert.ToDecimal("3.0");
                    objRow["Column3"] = Convert.ToDecimal("2.0");
                    objRow["Column4"] = Convert.ToDecimal("3.0");
    
                }
                else
                {
                    objRow["Column1"] = Convert.ToDecimal("4.9");
                    objRow["Column2"] = Convert.ToDecimal("3.0");
                    objRow["Column3"] = Convert.ToDecimal("2.0");
                    objRow["Column4"] = Convert.ToDecimal("1.0");
    
                }
                dtSpiCpi.Rows.Add(objRow);
            }
            chartSpiCpi.RemoveAll();        storeSpiCpi.RemoveAll();
            DataRow drNewRow = dtSpiCpi.NewRow();
            drNewRow[0] = string.Empty;
            dtSpiCpi.Rows.InsertAt(drNewRow, 0);
            drNewRow = dtSpiCpi.NewRow();
            drNewRow[0] = string.Empty;        dtSpiCpi.Rows.InsertAt(drNewRow, 13);        
            storeSpiCpi.RemoveAll();
            storeSpiCpi.DataSource = dtSpiCpi;
            storeSpiCpi.DataBind();
        }
    </script>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Submit MultiSelect Values - Ext.NET Examples</title> 
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
            <table border="0" >
                <tr>
                    <td>
                        <ext:ChartTheme ID="ChartTheme1" runat="server" ThemeName="CustomBlue">
                            <Axis Stroke="Black"  />
                            <AxisLabelLeft   Font="normal 11px Arial" StrokeWidth="0.5"  />
                            <AxisLabelBottom   Font="normal 11px Arial"  StrokeWidth="0.5"  />
                        </ext:ChartTheme> 
                        <ext:ComboBox runat="server" ID="ddlCpiSpiChartScale" Selectable="true" Editable="false" HideTrigger="false" Hidden="true"
                            Width="100px">
                            <Items>
                                <ext:ListItem Text="None" Value="1" />
                                <ext:ListItem Text="0 to 2" Value="2" />
                                <ext:ListItem Text="0 to 4" Value="3" />
                            </Items> 
                            <Listeners>
                                <Select Handler="ShowCpiSpiChartAfter_ChangeOnSetScaleIndex();" />
                            </Listeners>
                        </ext:ComboBox>
                        <ext:Panel ID="PanelYtd" runat="server" Width="1000" Border="false" Height="500" Layout="FitLayout">
                            <Items>
                                <ext:Chart ID="chartSpiCpi" runat="server" Shadow="false" Theme="CustomBlue"
                                    Animate="true" Width="850" Height="425" Legend="true" StyleSpec="background:#fff;">
                                    <Store>
                                        <ext:Store ID="storeSpiCpi" runat="server">
                                            <Model>
                                                <ext:Model ID="Model16" runat="server">
                                                    <Fields>
                                                        <ext:ModelField Name="DateName" Type="String" />
                                                        <ext:ModelField Name="Column1">
                                                            <Convert Handler="if (value == null) {
                                                                                value = undefined;
                                                                            }                                                 
                                                                            return value;" />
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column2">
                                                            <Convert Handler="if (value == null) {
                                                                                    value = undefined;
                                                                                }                                                 
                                                                                return value;" />
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column3">
                                                            <Convert Handler="if (value == null) {
                                                                                    value = undefined;
                                                                                }                                                 
                                                                                return value;" />
                                                        </ext:ModelField>
                                                        <ext:ModelField Name="Column4">
                                                            <Convert Handler="if (value == null) {
                                                                                value = undefined;
                                                                            }                                                 
                                                                            return value;" />
                                                        </ext:ModelField>
                                                    </Fields>
                                                </ext:Model>
                                            </Model>
                                        </ext:Store>
                                    </Store>
                                    <Axes>
                                        <ext:NumericAxis Position="Left" Fields="Column1,Column2,Column3,Column4" Title="Y"   >
                                            <LabelTitle   Fill="#000000" FontSize="11px" FontStyle="Normal" />
                                            <%--<Label FontSize="11px" FontStyle="Normal" Fill="#000000" />--%>
                                            <GridConfig>
                                                <Odd Opacity="0.5" Stroke="Black" Fill="White" StrokeWidth="0.1" />
                                                <Even Opacity="0.5" Stroke="Black" Fill="White" StrokeWidth="0.1" />
                                            </GridConfig>
                                        </ext:NumericAxis>
                                        <ext:CategoryAxis Position="Bottom" Fields="DateName"  >
                                            <LabelTitle Font="normal 11px Arial;" Stroke="Black" Fill="#000000" />
                                            <Label Font="normal 11px Arial;" Fill="#000000" />
                                        </ext:CategoryAxis>
                                    </Axes>
                                    <LegendConfig Position="Bottom" BoxStroke="white" BoxStrokeWidth="5" ItemSpacing="25" LabelFont="normal 21px Arial;">
                                    </LegendConfig>
                                    <Series>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column1" Title="Column1" Smooth="10" SelectionTolerance="5">
                                            <Tips ID="Tips2" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                                <Renderer Handler="this.setTitle('Column 1: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
                                            </Tips>
                                            <MarkerConfig Fill="#6A8829" Stroke="#6A8829" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#6A8829" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
                                        </ext:LineSeries>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column2" Title="Column2" Smooth="10" SelectionTolerance="5">
                                            <Tips ID="Tips3" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                                <Renderer Handler="this.setTitle('Column 2: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
                                            </Tips>
                                            <MarkerConfig Fill="#E15E00" Stroke="#E15E00" Type="Circle" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#E15E00" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
                                        </ext:LineSeries>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column3" Title="Column3" Smooth="10" SelectionTolerance="5">
                                            <Tips ID="Tips4" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                                <Renderer Handler="this.setTitle('Column 3: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
                                            </Tips>
                                            <MarkerConfig Fill="#1E7A93" Stroke="#1E7A93" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#1E7A93" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
                                        </ext:LineSeries>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column4" Title="Column4" Smooth="10" SelectionTolerance="5">
                                            <Tips ID="Tips5" runat="server" TrackMouse="false" Width="330" Anchor="right" ShowDelay="0" DismissDelay="0" HideDelay="0">
                                                <Renderer Handler="this.setTitle('Column 4: ' + item.value[1] + ' (Click here to see drill down report)');" Delay="500" />
                                            </Tips>
                                            <MarkerConfig Fill="#50386E" Stroke="#50386E" Type="Diamond" Radius="2" StrokeWidth="2" Cursor="pointer" />
                                            <Style Stroke="#50386E" StrokeWidth="2" />
                                            <Label Font="normal 11px Arial;" Stroke="Black" Fill="White" />
                                        </ext:LineSeries>
                                    </Series>
                                </ext:Chart>
                            </Items>
                        </ext:Panel>
    
                    </td>
                </tr>
            </table>
    
        </form>
    </body>
    </html>
    Attached Thumbnails Click image for larger version. 

Name:	Legend.png 
Views:	101 
Size:	27.8 KB 
ID:	24213  
    Last edited by Daniil; Sep 07, 2015 at 4:22 PM. Reason: [FIXED] [#891] [2.5.4]
  2. #2
    Hi @praveencat123,

    Thank you for the report!

    Created an Issue:
    https://github.com/extnet/Ext.NET/issues/891

    It should be fixed in the revision 6559 (branches/2). Please update from SVN and retest.
  3. #3
    Thanks for the fix.

    Extremely apologize for taking your time.

    Can you please help me how to download this file, i am not sure how to download

    Do i need to use existing credential or need to create new account in GUITHUB

    If you have any document please share

    REgards
    Praveen
  4. #4
    Please don't worry, we are always glad to help with anything.

    There is a tutorial how to update for SVN.
    http://ext.net/svn
  5. #5
    HI Daniil

    not able to download the code from SVN using current credentials.

    Please help me on this issue.

    Regards
    Praveen
  6. #6
    current credentials
    Please clarify is it the same credentials that you use to log in in the forums or different?
  7. #7
    Its the same credential which i am using for http://forums.ext.net/
  8. #8
    Please re-read Step 4 in the tutorial.
    http://ext.net/svn
  9. #9
    Sorry no progress, cannot able to download



    same example is working in Ext.net example for IE8,IE10 but why my code is not working in IE8 ( What is the difference)

    https://examples2.ext.net/#/Chart/Line/Basic/

    Regards
    praveen
  10. #10
    Sorry no progress, cannot able to download
    Please clarify where does the process stop?

    same example is working in Ext.net example for IE8,IE10 but why my code is not working in IE8 ( What is the difference)

    https://examples2.ext.net/#/Chart/Line/Basic/
    The example behaves for me in the same way as your sample does without the fix.

Similar Threads

  1. [CLOSED] Fill between two line series
    By jchau in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 20, 2014, 1:51 PM
  2. Replies: 2
    Last Post: Nov 07, 2013, 1:03 PM
  3. [CLOSED] Configure Legend of Line Chart Series
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 31
    Last Post: Oct 19, 2013, 4:32 AM
  4. How to use Line series Chart in version 1.3
    By Binai in forum 1.x Help
    Replies: 1
    Last Post: May 08, 2013, 12:46 PM
  5. [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

Tags for this Thread

Posting Permissions