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

  1. #1

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

    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>
    
    Last edited by Daniil; Apr 03, 2015 at 7:41 AM. Reason: [CLOSED]
  2. #2
    Hi @praveencat123,

    Please edit the post wrapping the code in [CODE] tags.
    Forum Guidelines For Posting New Topics
  3. #3
    Thank you.

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

    its working in Firefox but not working in IE 8

    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)
    Last edited by praveencat123; Mar 29, 2015 at 7:00 AM. Reason: its working in Firefox but not working in IE 8
  5. #5
    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>
  6. #6

    its working

    HI Daniil .................its working thank you very much....:)

Similar Threads

  1. [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
  2. Replies: 4
    Last Post: Apr 08, 2014, 5:45 PM
  3. [CLOSED] How to skip series labels if they overlap in line chart?
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 08, 2014, 5:44 PM
  4. Replies: 11
    Last Post: Mar 14, 2014, 7:10 AM

Tags for this Thread

Posting Permissions