[CLOSED] Tooltip is displaying before mouseover on the point in LINE Chart

  1. #1

    [CLOSED] Tooltip is displaying before mouseover on the point in LINE Chart

    HI Daniil

    Tooltip need to displayed onmouseover of the points, but its showing if the mouse pointer is near to the point and if the two values are near then
    tooltip is overlapping

    Please find the screenshot,code below and help us to resolved the issue

    <%@ 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>
        <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />
        <style type="text/css">
        </style>
        <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript"> 
                function ShowCpiSpiChartAfter_ChangeOnSetScaleIndex() {    
                    if(#{ddlCpiSpiChartScale}.getValue() == "1")
                    {                   
    
                        #{chartSpiCpi}.axes.getAt(0).minimum = 0 ;//#{hdnCpiSpiAxisYMinimum}.getValue();
                        #{chartSpiCpi}.axes.getAt(0).maximum  = 5;//#{hdnCpiSpiAxisYMaximumScale}.getValue();
                        #{chartSpiCpi}.redraw();
                    }
                    else  if(#{ddlCpiSpiChartScale}.getValue() == "2")
                    {
                        #{chartSpiCpi}.axes.getAt(0).minimum = 0;
                        #{chartSpiCpi}.axes.getAt(0).maximum  = 2;
                        #{chartSpiCpi}.redraw();
                    }
                    else  if(#{ddlCpiSpiChartScale}.getValue() == "3")
                    {
                        #{chartSpiCpi}.axes.getAt(0).minimum = 0;
                        #{chartSpiCpi}.axes.getAt(0).maximum  = 4;
                        #{chartSpiCpi}.redraw();
                    }
                    
                       #{chartSpiCpi}.redraw();
                        #{chartSpiCpi}.refresh();
                        #{chartSpiCpi}.forceRefresh(); 
                }
        </script>
        </ext:XScript>
        <script type="text/javascript" language="javascript">
        </script>
    </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="Red" BoxStrokeWidth="5" ItemSpacing="25" LabelFont="normal 21px Arial;">
                                    </LegendConfig>
                                    <Series>
                                        <ext:LineSeries Axis="Left" XField="DateName" YField="Column1" Title="Column1" Smooth="10">
                                            <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">
                                            <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">
                                            <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">
                                            <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>
    REgards
    Praveen
    Attached Thumbnails Click image for larger version. 

Name:	Screenshot1.png 
Views:	94 
Size:	27.4 KB 
ID:	24209   Click image for larger version. 

Name:	Screenshot2.png 
Views:	103 
Size:	23.9 KB 
ID:	24210  
    Last edited by Daniil; Sep 07, 2015 at 6:57 AM. Reason: [CLOSED]
  2. #2
    Hi @praveencat123,

    Please decrease SelectionTolerance of LineSeries which is 20 by default.
    http://docs.sencha.com/extjs/4.2.1/#...ctionTolerance

    Setting SelectionTolerance="5" appears to be helpful.
  3. #3

    Thanks daniil ....Its working

    Thanks daniil ....Its working

    Really appreciate your expertise in EXT.NET

    Regards
    Praveen

Similar Threads

  1. [CLOSED] How to change ToolTip background color ,font zize for line chart
    By praveencat123 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 25, 2015, 5:35 PM
  2. [CLOSED] Show hand coursor on mouseover of point in line chart in ext.net 2.5
    By praveencat123 in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 03, 2015, 6:26 AM
  3. [CLOSED] "SeriesLabel" in Line Chart not displaying properly
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 08, 2014, 10:48 AM
  4. [CLOSED] How to hide tooltip of specific data point in line chart?
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 18, 2014, 11:35 AM
  5. [CLOSED] Dotted line renders as solid line in line chart image
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 01, 2014, 5:28 PM

Tags for this Thread

Posting Permissions