PDA

View Full Version : [CLOSED] Show hand coursor on mouseover of point in line chart in ext.net 2.5



praveencat123
Mar 25, 2015, 11:43 AM
Can any one tell - in line chart how to show hand courser when the user mouseover on point in line charts

Below is the sample,





<%@ 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)
{
var res = new List<object>
{
new { Name = "Jan 15", Data1 = 10 },
new { Name = "Feb 15", Data1 = 20 },
new { Name = "Mar 15", Data1 = 30 },
new { Name = "Apr 15", Data1 = 20 },
new { Name = "May 15", Data1 = 2 },
new { Name = "Jun 15", Data1 = 25 },
new { Name = "Jul 15", Data1 = 16 },
new { Name = "Aug 15", Data1 = 20 },
new { Name = "Sep 15", Data1 = 16 },
new { Name = "Oct 15", Data1 = 20 },
new { Name = "Nov 15", Data1 = 16 },
new { Name = "Dec 15", Data1 = 20 },
};
this.Chart1.GetStore().Data = res;
}
}
</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">
</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="1">
<tr>
<td>

<ext:Chart
ID="Chart1"
runat="server"
Shadow="true"
StyleSpec="background:#fff"
Animate="true" Width="1000" Height="500">
<Store>
<ext:Store ID="Store1"
runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Name" />
<ext:ModelField Name="Data1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>

<Axes>
<ext:NumericAxis
Fields="Data1"
Grid="true"
Title="Number of Hits"
Minimum="-20">
<Label>
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>

</ext:NumericAxis>

<ext:CategoryAxis
Position="Bottom"
Fields="Name"
Title="Month of the Year" />
</Axes>
<Series>
<ext:LineSeries
Axis="Left"
Highlight="true"
XField="Name"
YField="Data1">
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="140" Height="28">
<Renderer Handler="this.setTitle(storeItem.get('Name') + ': ' + storeItem.get('Data1'));" />
</Tips>
<Style Href="" />
<Label
Display="InsideEnd"
Field="Data1"
Orientation="Horizontal"
Color="#333"
TextAnchor="middle">
<Renderer Handler="return Ext.util.Format.number(value, '0');" />
</Label>
</ext:LineSeries>
</Series>
</ext:Chart>
</td>
</tr>
<tr>
<td colspan="3"></td>
</tr>
</table>

<ext:Window ID="wndDetialsCpiSpiMonthly" runat="server" Height="575" Width="800"
Resizable="true" Modal="true" ButtonAlign="Center" Hidden="true" Closable="true"
Title="Detail View" Border="false" Layout="FitLayout" Maximized="true">
<Items></Items>
</ext:Window>
</form>
</body>
</html>

Daniil
Mar 25, 2015, 6:56 PM
Hi @praveencat123,

Please edit the post wrapping the code in [CODE] tags.
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)

Daniil
Mar 27, 2015, 9:26 PM
Thank you.

Please set <MarkerConfig Cursor="pointer" /> for the LineSeries.

praveencat123
Mar 28, 2015, 5:24 AM
HI Daniil, thank you for quick reply its working in firefox but its not working in IE 8 ( Is there any solution for IE because for our project most of the users are IE)

Daniil
Mar 30, 2015, 3:21 PM
I can suggest setting this for the LineSeries:

<Listeners>
<AfterRender Handler="this.markerGroup.each(function(m) { m.addCls('my-marker'); });" />
</Listeners>
and this style definition

<style>
.x-ie8m .my-marker {
cursor: pointer;
}
</style>

praveencat123
Apr 03, 2015, 6:26 AM
HI Daniil .................its working thank you very much....:)