PDA

View Full Version : [CLOSED] Chart marker radius for tip



bayoglu
Apr 16, 2013, 3:11 PM
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.

Baidaly
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>

bayoglu
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.

bayoglu
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>

Daniil
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

bayoglu
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.

Daniil
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.

Daniil
Apr 19, 2013, 2:27 PM
A good news. Please follow:
http://forums.ext.net/showthread.php?21115#post107517

bayoglu
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 (;

Daniil
Apr 19, 2013, 3:54 PM
Good luck!:) We are here to help.