Sep 04, 2015, 12:00 PM
[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
Praveen
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>
REgardsPraveen
Last edited by Daniil; Sep 07, 2015 at 6:57 AM.
Reason: [CLOSED]