PDA

View Full Version : [CLOSED] [#13] labels LineSeries aren't shown into the chart



tactime10
Sep 04, 2012, 11:26 AM
Hi,

I need to show the label for the each point of LineSeries for the chart, but if I set the property hidden= true for the panel I don't see the values of labels.
I attach the example that show my problem.
If I run the following code with property Hidden="true" for the panel1



<%@ Page Language = "C#"%>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
public class MonitorViewer
{
private double yieldValue;
private int pnFirstOk;
private int pnFirstKo;
private int pnTotalPass;
private string period;

public MonitorViewer() {}

public double YieldValue {
get { return yieldValue; }
set { yieldValue = value; }
}

public int PnFirstOk {
get { return pnFirstOk; }
set { pnFirstOk = value; }
}

public int PnFirstKo {
get { return pnFirstKo; }
set { pnFirstKo = value; }
}

public int PnTotalPass {
get { return pnTotalPass; }
set { pnTotalPass = value; }
}

public string Period {
get { return period; }
set { period = value; }
}
}

public object[] DataValue () {
IList<MonitorViewer> listItems = new List<MonitorViewer>();
MonitorViewer monitorViewer1 = new MonitorViewer();
monitorViewer1.YieldValue = Double.Parse("95,97");
monitorViewer1.Period= "30/03/12 - 20/04/12";
monitorViewer1.PnFirstOk = 7507;
monitorViewer1.PnFirstKo = 315;
monitorViewer1.PnTotalPass = 7994;

MonitorViewer monitorViewer2 = new MonitorViewer();
monitorViewer2.YieldValue = Double.Parse("96,68");
monitorViewer2.Period= "20/04/12 - 12/05/12";
monitorViewer2.PnFirstOk = 5995;
monitorViewer2.PnFirstKo = 206;
monitorViewer2.PnTotalPass = 6504;

MonitorViewer monitorViewer3 = new MonitorViewer();
monitorViewer3.YieldValue = Double.Parse("95,91");
monitorViewer3.Period= "12/05/12 - 03/06/12";
monitorViewer3.PnFirstOk = 9732;
monitorViewer3.PnFirstKo = 415;
monitorViewer3.PnTotalPass = 10209;

MonitorViewer monitorViewer4 = new MonitorViewer();
monitorViewer4.YieldValue = Double.Parse("96,09");
monitorViewer4.Period= "03/06/12 - 24/06/12";
monitorViewer4.PnFirstOk = 6710;
monitorViewer4.PnFirstKo = 273;
monitorViewer4.PnTotalPass = 7309;

MonitorViewer monitorViewer5 = new MonitorViewer();
monitorViewer5.YieldValue = Double.Parse("96,29");
monitorViewer5.Period= "24/06/12 - 16/07/12";
monitorViewer5.PnFirstOk = 1922;
monitorViewer5.PnFirstKo = 74;
monitorViewer5.PnTotalPass = 2021;

MonitorViewer monitorViewer6 = new MonitorViewer();
monitorViewer6.YieldValue = Double.Parse("0,0");
monitorViewer6.Period= "16/07/12 - 07/08/12";
monitorViewer6.PnFirstOk = 0;
monitorViewer6.PnFirstKo = 0;
monitorViewer6.PnTotalPass = 0;

MonitorViewer monitorViewer7 = new MonitorViewer();
monitorViewer7.YieldValue = Double.Parse("0,0");
monitorViewer7.Period= "07/08/12 - 28/08/12";
monitorViewer7.PnFirstOk = 0;
monitorViewer7.PnFirstKo = 0;
monitorViewer7.PnTotalPass = 0;

listItems.Add(monitorViewer1);
listItems.Add(monitorViewer2);
listItems.Add(monitorViewer3);
listItems.Add(monitorViewer4);
listItems.Add(monitorViewer5);
listItems.Add(monitorViewer6);
listItems.Add(monitorViewer7);

object[] periodArray = new object
[listItems.Count];
for (int i = 0;i < listItems.Count;i++) {
MonitorViewer monitorViewer = listItems[i];
object[] itemArray = new object[]{monitorViewer.YieldValue,monitorViewer.Period,mon itorViewer.PnFirstOk,monitorViewer.PnFirstKo,monit orViewer.PnTotalPass};

periodArray[i] = itemArray;
}
return periodArray;
}

public void Page_Load() {
//var store = this.yieldChart.GetStore();
//store.DataSource = DataValue();
//store.DataBind();
}

protected void ExtractData(object sender, DirectEventArgs e) {
var store = this.yieldChart.GetStore();
store.DataSource = DataValue();
store.DataBind();
this.panel1.Hidden = false;
}
</script>

<body>
<form Method=post Runat="server">
<ext:ResourceManager Id="resourceManager" runat="server" />
<h3>Example</h3>
<br/>
<ext:Button ID="btnSearch" Text="Search" runat="server" Hidden="false" Icon="Magnifier" >
<DirectEvents>
<Click OnEvent="ExtractData">
<EventMask ShowMask="true" MinDelay="100"/>
</Click>
</DirectEvents>
</ext:Button>
<br/>
<ext:ChartTheme
ID="CustomThemeID"
runat="server"
ThemeName="CustomTheme"
Colors="url(#blueColor),url(#greenColor),url(#redColor),ur l(#orangeColor)">
</ext:ChartTheme>

<ext:Panel ID="panel1" runat="server" Height="600" Layout="FitLayout" MarginSpec="0 0 3 0" Hidden="true">
<Bin>
<ext:Store ID="yieldStore" runat="server">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="yield"/>
<ext:ModelField Name="period"/>
<ext:ModelField Name="pnFirstOk"/>
<ext:ModelField Name="pnFirstKo"/>
<ext:ModelField Name="pnTotalPass"/>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Bin>
<Items>
<ext:Chart
ID="yieldChart"
runat="server"
Flex="1"
Theme="CustomTheme"
Shadow="true"
Animate="true"
StoreID="yieldStore">

<Gradients>
<ext:Gradient GradientID="redColor" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="#e21413" />
<ext:GradientStop Offset="100" Color="#d82931" />
</Stops>
</ext:Gradient>

<ext:Gradient GradientID="orangeColor" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="#ecbe38" />
<ext:GradientStop Offset="100" Color="#dc9614" />
</Stops>
</ext:Gradient>

<ext:Gradient GradientID="greenColor" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="#3ed730" />
<ext:GradientStop Offset="100" Color="#3ea830" />
</Stops>
</ext:Gradient>

<ext:Gradient GradientID="blueColor" Angle="0">
<Stops>
<ext:GradientStop Offset="0" Color="#4868e7" />
<ext:GradientStop Offset="100" Color="#3c56bf" />
</Stops>
</ext:Gradient>
</Gradients>

<Axes>
<ext:NumericAxis Position="Left" Fields="yield" Minimum="0" />
<ext:NumericAxis Position="Right" Minimum="0" Fields="pnFirstOk,pnFirstKo,pnTotalPass" Hidden="true">
</ext:NumericAxis>
<ext:CategoryAxis Position="Bottom" Fields="period">
<Label Font="10px Arial">
<Rotate Degrees="270" />
<Renderer Handler="return Ext.String.ellipsis(value, 15, false);" />
</Label>
</ext:CategoryAxis>
</Axes>

<Series>
<ext:ColumnSeries Axis="Left" Highlight="true" XField="period" YField="yield">
<Style Fill="#38B8BF" StrokeWidth="3" />
<Label Contrast="true" Display="Under" Field="yield" Color="#000" TextAnchor="middle" />
</ext:ColumnSeries>
<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstOk" >
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />

<Label Contrast="true" Display="InsideEnd" Field="pnFirstOk" Color="#000" TextAnchor="middle" />
</ext:LineSeries>
<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstKo" >
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />

<Label Contrast="true" Display="InsideEnd" Field="pnFirstKo" Color="#000" TextAnchor="middle" />
</ext:LineSeries>
<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnTotalPass" >
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />

<Label Contrast="true" Display="InsideEnd" Field="pnTotalPass" Color="#000" TextAnchor="middle" />
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</Body>
</Html>


I don't see nothing on the labels as it is shown into following image 4722

If I run the same code with property Hidden="false" for the panel1
I see this 4723

I need to start the panel hidden into my page and after click on the button it is shown.
How can solve this issue?

I hope clear.

Thank you so much.

Daniil
Sep 04, 2012, 12:59 PM
Hi,

I am unable to reproduce the issue - I see the same with Hidden true and false.

What browser do you test with? is it reproducible with all major browsers on your side?

tactime10
Sep 04, 2012, 1:36 PM
What browser do you test with? is it reproducible with all major browsers on your side?

I use IE9 with standard mode of IE9. I tried also last version of firefox and the page rendering is same of IE9.

Daniil
Sep 04, 2012, 1:44 PM
Please clarify what Ext.NET sources do you use?

tactime10
Sep 04, 2012, 2:20 PM
Please clarify what Ext.NET sources do you use?

I use files taken from Ext.NET.Pro.2.0.0.zip

Daniil
Sep 04, 2012, 2:37 PM
I would recommend to update from the v2.1 branch.
http://svn.ext.net/premium/branches/2.1/

There are already many bug fixes and improvements (mainly, MVC support).

tactime10
Sep 05, 2012, 8:17 AM
Hi,

I updated Ext.Net at the last version as you suggest, but the problem it's same.
Can you suggest something?

Thank you.

Daniil
Sep 05, 2012, 9:10 AM
Please send a test project with the dlls to
support@object.net

I will investigate.

Daniil
Sep 05, 2012, 12:26 PM
Thank you for the test project.

Here is the screenshot after clicking the Search button.

So, I see the labels. Can you try it on another PC?

tactime10
Sep 10, 2012, 1:57 PM
Hi,

The chart that I see into my page is same as you attached into screenshot last post, but my problem is the labels on the LineSeries not the ColumnSeries. If I set for the panel property hidden=true on my side I see this
4750

instead I set for the panel property hidden=false I see this
4751

I highlighted the differences on image below
4752

I want to see the label for the LineSeries.
I hope clear.
Thank you so much.

Daniil
Sep 10, 2012, 4:44 PM
Thank you for pointing it out. Really, I looked at the ColumnSeries labels only.

I will investigate.

For now, please try to call the Redraw method for the Chart after showing it.

Daniil
Sep 11, 2012, 11:06 AM
Finally, I would suggest you to replace

protected void ExtractData(object sender, DirectEventArgs e)
{
var store = this.yieldChart.GetStore();
store.DataSource = DataValue();
store.DataBind();
this.panel1.Hidden = false;
}
with

protected void ExtractData(object sender, DirectEventArgs e)
{
this.panel1.Hidden = false;

var store = this.yieldChart.GetStore();
store.DataSource = DataValue();
store.DataBind();
}

Thank you for your patience.

tactime10
Sep 12, 2012, 10:13 AM
Hi,

Ok now it works. I have another question.
Why the color of labels the LineSeries are different for the ColumnSeries if the property color for Label tag it's same ?



<ext:ColumnSeries Axis="Left" Highlight="true" XField="period" YField="yield">
<Style Fill="#38B8BF" StrokeWidth="3" />
<Label Contrast="true" Display="Under" Field="yield" Color="#000" TextAnchor="middle" />
</ext:ColumnSeries>
<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstOk" >
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />

<Label Contrast="true" Display="InsideEnd" Field="pnFirstOk" Color="#000" TextAnchor="middle" />
</ext:LineSeries>


I run this code I see the labels as below
4761

Thank you so much for your support and collaboration.

Daniil
Sep 12, 2012, 12:01 PM
The Contrast option causes this behavior.

<Label Contrast="true" ...>

It automatically determines the color according background to be contrast.

If you would remove this option for all Labels, you will get the same colors for all.

tactime10
Sep 13, 2012, 9:16 AM
Thank you,

If possible to change the color of label? because I set the Label with property Contrast="false" and define a color as below


<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstOk" >
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />

<Label Contrast="false" Display="InsideEnd" Field="pnFirstOk" Color="#319915" TextAnchor="Middle" />
</ext:LineSeries>
<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnFirstKo" >
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />

<Label Contrast="false" Display="InsideEnd" Field="pnFirstKo" Color="#CC1700" TextAnchor="Middle" />
</ext:LineSeries>
<ext:LineSeries Highlight="true" Axis="Right" Smooth="3" XField="period" YField="pnTotalPass" >
<MarkerConfig Type="Circle" Size="4" Radius="4" StrokeWidth="0" />

<Label Contrast="false" Display="InsideEnd" Field="pnTotalPass" Color="#C97C00" TextAnchor="Middle" />
</ext:LineSeries>


but I don't see the color that I set for the color property instead I see this
4770

- I would to show the label for LineSeries over point, how can do it? I try to set property Display="over",
but in this case the label is shown over the chart, not on LineSeries.
- Finally, I would to increase the size line of the lineSeries, how can do it?

Thank you so much and excuse me for many questions.

Daniil
Sep 13, 2012, 4:28 PM
If possible to change the color of label? because I set the Label with property Contrast="false" and define a color as below

I think it is a bug. I reported to Sencha.
http://www.sencha.com/forum/showthread.php?242522

I will monitor.



- I would to show the label for LineSeries over point, how can do it? I try to set property Display="over",
but in this case the label is shown over the chart, not on LineSeries.
- Finally, I would to increase the size line of the lineSeries, how can do it?

Please start a new forum thread for each issue. Please keep one issue or tightly related issues per thread. Thank you.

Daniil
Sep 13, 2012, 7:53 PM
I think it is a bug. I reported to Sencha.
http://www.sencha.com/forum/showthread.php?242522

I will monitor.


Sencha opened a bug ticket.

geoffrey.mcgill
Sep 28, 2012, 8:53 PM
Ticket is still open and we're continuing to monitor the ticket.

geoffrey.mcgill
Nov 16, 2012, 7:13 AM
Opened an Issue to track this defect, see

https://github.com/extnet/Ext.NET/issues/13

Baidaly
May 30, 2013, 4:58 AM
Hello!

This issue has been fixed. Can you update from SVN and retest it? We tested with the following sample:



<%@ Page Language="C#" %>

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<script runat="server">
public void Page_Load(object sender, EventArgs e)
{
Store1.Data = new object[]
{
new
{
X = "1",
Y = "0"
},
new
{
X = "50",
Y = "50"
},
new
{
X = "100",
Y = "100"
}

};
Store1.DataBind();
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Panel
runat="server"
Title="Line Chart"
Width="800"
Height="600"
Layout="FitLayout">
<Items>
<ext:Chart
ID="Chart1"
runat="server"
StyleSpec="background:#fff;">
<Store>
<ext:Store
runat="server"
ID="Store1"
AutoDataBind="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="X" Type="Int" />
<ext:ModelField Name="Y" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<Axes>
<ext:NumericAxis
Fields="X"
Title="X"
Position="Bottom">
</ext:NumericAxis>

<ext:NumericAxis
Fields="Y"
Title="Y"
Position="Left">
</ext:NumericAxis>
</Axes>
<Series>
<ext:LineSeries Axis="Left" XField="X" YField="Y">
<Label Field="Y" Display="Under" Color="#0F0"></Label>
</ext:LineSeries>
</Series>
</ext:Chart>
</Items>
</ext:Panel>
</form>
</body>
</html>