What's New?

[CLOSED] Chart marker radius for tip

  1. #1
    Apr 16, 2013, 3:11 PM

    [CLOSED] Chart marker radius for tip

    Hello,

    When points in a line series (ext:chart) are close to each other and tips configured, it is hard to make sure which point the chart tip belongs to. Even when I use ItemMouseUp event and display a notification on click, the information belongs to the point which's tip is visible not the one I am clicking on. I am not sure if I could describe the problem clear. My question is, how can I decrease the area of the marker causing the tip popup and make sure it will work more preciesly even if the points in the chart are very close but not touching each other.

    Thanks.
    Last edited by Daniil; Apr 19, 2013 at 3:53 PM. Reason: [CLOSED]
  2. #2
    Apr 16, 2013, 10:01 PM
    Hello!

    It seems that you should change default marker and highlight size:

    <ext:LineSeries Axis="Left" Smooth="3" XField="Name" YField="Data2">
	<HighlightConfig Size="7" Radius="7" />
	<MarkerConfig Type="Circle" Size="4" Radius="1" StrokeWidth="0" />
	<Tips runat="server" TrackMouse="true" Width="110" Height="25">                            
		<Renderer Handler="this.setTitle(storeItem.get('Data1') + ' visits in ' + storeItem.get('Name').substr(0, 3));"></Renderer>
	</Tips>
</ext:LineSeries>
  3. #3
    Apr 16, 2013, 10:31 PM
    Hello,

    I played with size and radius values, it did not have effect on the distance required to show tip for a marker. (I set size=1) Can you provide a sample (runnable) code where the markers are shown only if mouse is "over a marker point" or "closer than any other marker" (not roughly close to it).

    Thanks.
  4. #4
    Apr 16, 2013, 11:04 PM
    Okay, below is the code to play with. Tip displays ID of the marker point and they have values 0 to 5 (from left to right). Put mouse on the last marker, you will see 4 instead of 5. To see 5, I need to move marker to the right of the last marker. The same thing applies to other markers also. Can you modify the code's highlight config and marker config in order to see the tip only if mouse is over the marker point?

    Note: you may need to decrease the time difference between points if they are discrete enough to show tips regularly (may be dependent on the screen resolution).

    Thanks.

    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.Store1.DataSource = this.TestData();
            this.Store1.DataBind();
        }
    }
    private List<object> TestData()
    {
        List<object> data = new List<object>
            {
                new {
                        ID = 0,
                        Date = DateTime.Today,
                        Data = 1
                    },
                new {
                        ID = 1,
                        Date = DateTime.Today.AddMinutes(30),
                        Data = 1
                    },
                new {
                        ID = 2,
                        Date = DateTime.Today.AddMinutes(60),
                        Data = 1
                    },
                new {
                        ID = 3,
                        Date = DateTime.Today.AddMinutes(90),
                        Data = 1
                    },
                new {
                        ID = 4,
                        Date = DateTime.Today.AddMinutes(120),
                        Data = 1
                    },
                new {
                        ID = 5,
                        Date = DateTime.Today.AddMinutes(150),
                        Data = 1
                    }
            };
        return data;
    }
</script>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Ext.NET Examples</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
    <ext:Panel ID="Panel1" runat="server" Title="Showing tip..." Width="800" Height="500" Layout="FitLayout">
        <Items>
            <ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Animate="false">
                <Store>
                    <ext:Store ID="Store1" runat="server">
                        <Model>
                            <ext:Model ID="Model2" runat="server" IDProperty="ID">
                                <Fields>
                                    <ext:ModelField Name="ID" Type="Int" />
                                    <ext:ModelField Name="Date" Type="Date" />
                                    <ext:ModelField Name="Data" Type="Int" />
                                </Fields>
                            </ext:Model>
                        </Model>
                    </ext:Store>
                </Store>
                <Axes>
                    <ext:TimeAxis Fields="Date" Position="Bottom" Title="Time" DateFormat="Y, MMM dd">
                    </ext:TimeAxis>
                    <ext:NumericAxis Title="Value" Fields="Data" Position="Left" MajorTickSteps="1" MinorTickSteps="0">      
                        <Label>
                            <Renderer Handler="return value" />
                        </Label>                                                                                            
                    </ext:NumericAxis>
                </Axes>
                <Series>
                    <ext:LineSeries Axis="Left" XField="Date" YField="Data" ShowInLegend="false">
                        <Tips ID="MyTip" runat="server">
                            <Renderer Handler="this.setTitle(storeItem.data.ID.toString());"></Renderer>
                        </Tips>
                    </ext:LineSeries>
                </Series>
            </ext:Chart>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>
    Last edited by bayoglu; Apr 16, 2013 at 11:10 PM.
  5. #5
    Apr 17, 2013, 8:58 AM
    Hello,

    I think we are facing here the same issue as here:
    https://github.com/extnet/Ext.NET/issues/44

    Here is a report to Sencha which I updated with a new message.
    http://www.sencha.com/forum/showthread.php?243347
  6. #6
    Apr 19, 2013, 11:39 AM
    Unfortunately, yes (; The main problem is that I am facing so many issues like this when using ext:chart components and really started to think completely leaving it off and find another solution for chart issues. Do you have a suggestion to use as alternative?

    Thanks.
  7. #7
    Apr 19, 2013, 1:46 PM
    It is also our concern.
    http://www.sencha.com/forum/showthread.php?258745

    Unfortunately, we have no resources to develop Charts.

    I am going to give this issue another try.

    Regarding alternatives. There are some alternative solutions. Unfortunately, I am not quite experienced in it to suggest something.
  8. #8
    Apr 19, 2013, 2:27 PM
    A good news. Please follow:
    http://forums.ext.net/showthread.php?21115#post107517
  9. #9
    Apr 19, 2013, 3:43 PM
    I call it a "real bingo" (; Thanks Daniil, it works perfect. Please close the threat and wish me luck for the next chart challanges (;
  10. #10
    Apr 19, 2013, 3:54 PM
    Good luck!:) We are here to help.

Similar Threads

  1. [CLOSED] Is it possible to put a tooltip on chart legend or chart axis?
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  2. GMap Marker Draggable
    By bg101 in forum 1.x Help
    Replies: 5
    Last Post: Apr 09, 2012, 9:51 AM
  3. [CLOSED] Adding Google Marker From Code Behind
    By dev in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 13, 2011, 12:51 PM
  4. hide marker on by ID
    By sedoyksa in forum 1.x Help
    Replies: 1
    Last Post: Nov 21, 2011, 6:09 PM
  5. [CLOSED] Adding Google Marker with mouse
    By kenanhancer in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 22, 2011, 1:30 PM

Posting Permissions