PDA

View Full Version : [CLOSED] Tooltip is displaying before mouseover on the point in LINE Chart



praveencat123
Sep 04, 2015, 1:00 PM
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

Daniil
Sep 04, 2015, 6:08 PM
Hi @praveencat123,

Please decrease SelectionTolerance of LineSeries which is 20 by default.
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Line-cfg-selectionTolerance

Setting SelectionTolerance="5" appears to be helpful.

praveencat123
Sep 05, 2015, 2:18 AM
Thanks daniil ....Its working

Really appreciate your expertise in EXT.NET

Regards
Praveen