Sep 20, 2012, 12:00 PM
[CLOSED] [#44] Bug in tooltip in chart or not?
Hello
Please look at this example:
You can see that if window is small, dirst and last item tooltip did not show the right value, but the chart is well drawn (that means, that it is the good value that are drawn).
Look particularly to 29, 30 and 31 value, when window is small, pointing on 31 show 29, it is like the point 29 and 31 was too close to display the good value, pointing on item 31 show item 29.
And compare P75 to P50 item, P75 are goof (point are far), P75 not, points are close.
Please look at this example:
<%@ Page Language="C#" %>
<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
this.Store1.DataSource = new object[]
{
new object[] {1,1000,200,1550},
new object[] {2,1500,300,1450},
new object[] {3,2102,452,3200},
new object[] {4,1,125,952},
new object[] {5,18,214,458},
new object[] {6,30,57,480},
new object[] {7,25,38,452},
new object[] {8,14,189,650},
new object[] {9,11,170,520},
new object[] {10,9,98,152},
new object[] {11,3,78,259},
new object[] {12,45,120,454},
new object[] {13,10,200,550},
new object[] {14,15,300,450},
new object[] {15,21,452,800},
new object[] {16,1,125,952},
new object[] {17,18,214,458},
new object[] {18,30,57,480},
new object[] {19,25,38,452},
new object[] {20,14,189,650},
new object[] {21,11,170,520},
new object[] {22,9,98,152},
new object[] {23,3,78,259},
new object[] {24,45,120,454},
new object[] {25,10,200,550},
new object[] {26,15,300,450},
new object[] {27,21,452,800},
new object[] {28,1,125,952},
new object[] {29,1800,214,4580},
new object[] {30,3000,57,4800},
new object[] {31,2500,38,4520}
};
this.Store1.DataBind();
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Charts - Ext.NET Examples</title>
<style type="text/css">
.x-panel {
margin-bottom : 20px;
}
</style>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window
ID="wndETTRChart"
runat="server"
Width="320"
Height="505"
Hidden="False"
ExpandOnShow="True"
MinWidth="320"
MinHeight="505"
Maximizable="true"
Minimizable="false"
Closable="false"
Resizable="true"
TitleCollapse="false"
Title="Test"
TitleAlign="Center"
Collapsible="false"
Layout="FitLayout">
<Items>
<ext:Panel ID="Panel1"
runat="server"
Layout="FitLayout">
<Items>
<ext:Chart runat="server" InsetPadding="5" ID="chartETTR" Animate="true">
<LegendConfig Position="Bottom" />
<store>
<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Month" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
<ext:ModelField Name="Value3" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</store>
<Axes>
<ext:NumericAxis Fields="Value1, Value2, Value3" Grid="true" >
<Label Font="10px Arial">
<Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
</Label>
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="Month" AdjustEnd="true">
<Label>
<Rotate Degrees="270" />
</Label>
</ext:CategoryAxis>
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="Month" YField="Value1" Title="P25">
<Tips ID="Tips1" runat="server" TrackMouse="true" Width="80" Height="40">
<Renderer Handler="this.setTitle(storeItem.get('Month') + '<br />' + storeItem.get('Value1')); this.update(storeItem.get('Value1'));"></Renderer>
</Tips>
<MarkerConfig
Type="Circle"
Size="2"
Radius="2"
StrokeWidth="0"
/>
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="Month" YField="Value2" Title="P50">
<Tips ID="Tips2" runat="server" TrackMouse="true" Width="80" Height="40">
<Renderer Handler="this.setTitle(storeItem.get('Month') + '<br />' + storeItem.get('Value2')); this.update(storeItem.get('Value2'));"></Renderer>
</Tips>
<MarkerConfig
Type="Circle"
Size="2"
Radius="2"
StrokeWidth="0"
/>
</ext:LineSeries>
<ext:LineSeries Axis="Left" XField="Month" YField="Value3" Title="P75">
<Tips ID="Tips3" runat="server" TrackMouse="true" Width="80" Height="40">
<Renderer Handler="this.setTitle(storeItem.get('Month') + '<br />' + storeItem.get('Value3')); this.update(storeItem.get('Value3'));"></Renderer>
</Tips>
<MarkerConfig
Type="Circle"
Size="2"
Radius="2"
StrokeWidth="0"
/>
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</Items>
</ext:Window>
</form>
</body>
</html>You can see that if window is small, dirst and last item tooltip did not show the right value, but the chart is well drawn (that means, that it is the good value that are drawn).
Look particularly to 29, 30 and 31 value, when window is small, pointing on 31 show 29, it is like the point 29 and 31 was too close to display the good value, pointing on item 31 show item 29.
And compare P75 to P50 item, P75 are goof (point are far), P75 not, points are close.
Last edited by Daniil; Apr 19, 2013 at 2:26 PM.
Reason: [CLOSED]
Originally Posted by Daniil
