PDA

View Full Version : [CLOSED] [#228] Scatter series label - fit into chart



bayoglu
May 01, 2013, 10:08 PM
Hello,

The problem is that the scatter series label goes out of chart's rendered area if the value equals to the axis maximum value. Do you have a workaround to align label text (except inreasing X axis maximum value)?

Thanks.

Figure: 6137

Sample code:



<%@ 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,
Name = "Item 01",
XVal = 1,
Data1 = 1
},
new {
ID = 1,
Name = "Item 02",
XVal = 2,
Data1 = 2
},
new {
ID = 2,
Name = "Item 03",
XVal = 3,
Data1 = 3
},
new {
ID = 3,
Name = "Item 04",
XVal = 4,
Data1 = 4
},
new {
ID = 4,
Name = "Item 05",
XVal = 5,
Data1 = 5
}
};
return data;
}
</script>
<script type="text/javascript">
</script>

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Scatter Series Labels</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" SourceFormatting="True" />
<ext:Panel ID="Panel1" runat="server" Width="800" Height="500" Layout="FitLayout">
<Items>
<ext:Chart ID="Chart1" runat="server" StyleSpec="background:#fff;" Animate="false" Flex="1" Legend="true">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server" IDProperty="ID">
<Fields>
<ext:ModelField Name="ID" Type="Int" />
<ext:ModelField Name="XVal" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="Data1" Type="Int"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis Title="Vaue Y" Fields="Data1" Position="Left" Minimum="0" Maximum="10">
</ext:NumericAxis>
<ext:NumericAxis Title="Value X" Position="Bottom" Minimum="0" Maximum="5">
</ext:NumericAxis>
</Axes>
<Series>
<ext:ScatterSeries Axis="Bottom" XField="XVal" YField="Data1">
<MarkerConfig Type="Circle" Radius="7" Size="7" />
<HighlightConfig Size="10" Radius="10" />
<Label Display="Over" Field="Name" Orientation="Horizontal" FontSize="10"></Label>
<Tips TrackMouse="true" Width="100">
<Renderer Handler="this.setTitle(storeItem.data.Name);"></Renderer>
</Tips>
</ext:ScatterSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>

Daniil
May 02, 2013, 7:53 AM
Hi @bayoglu,

Yes, it is a problem. I reported to Sencha.
http://www.sencha.com/forum/showthread.php?262721


Do you have a workaround to align label text (except inreasing X axis maximum value)?

Unfortunately, I can't see any other workaround at the moment.

Daniil
May 03, 2013, 5:48 AM
@slemmon said:

Looks like this is fixed in the latest 4.2.1 Nightly build.

So, it will come to Ext.NET with the ExtJS 4.2.1 final release.

I created an Issue to track it.
https://github.com/extnet/Ext.NET/issues/228

Baidaly
May 31, 2013, 3:26 AM
Hello!

The issue appears to be fixed in the SVN trunk. Please update.