PDA

View Full Version : [CLOSED] Problem in vertical axes drawing in charts



feanor91
May 23, 2012, 11:24 AM
Hello

See that code:


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

<%@ Import Namespace="Ext.Net.Utilities"%>
<%@ Import Namespace="Panel=Ext.Net.Panel" %>
<%@ Import Namespace="Chart=Ext.Net.Chart" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
protected void Page_Load(object sender,EventArgs e)
{
// Load the data into the Store and DataBind.
this.stoCharts.DataSource = this.stoChartsValue;
this.stoCharts.DataBind();

this.Form.Controls.Add(BuildWindow1()); //construct window with chart build into
}

private object[] stoChartsValue
{
get
{
return new object[]
{
new object[] {"2011/01/01",10,200},
new object[] {"2011/02/01",15,300},
new object[] {"2011/03/01",21,452},
new object[] {"2011/04/01",1,125},
new object[] {"2011/05/01",18,214},
new object[] {"2011/06/01",30,57},
new object[] {"2011/07/01",25,38},
new object[] {"2011/08/01",14,189},
new object[] {"2011/09/01",11,170},
new object[] {"2011/10/01",9,98},
new object[] {"2011/11/01",3,78},
new object[] {"2011/12/01",45,120}
};
}
}


private Window BuildWindow1()
{
return this.X().Window()
.ID("Window1")
.Title("My Window With Chart in it")
.Height(400)
.Width(300)
.X(0)
.Y(0)
.Layout("Fit")
.Add(BuildChart());

}

private Window BuildWindow2()
{
return this.X().Window()
.ID("Window2")
.Title("My Window with chart into panel")
.Height(400)
.Width(300)
.X(500)
.Y(500)
.Layout("Fit")
.Add(BuildPanel());

}
private Chart BuildChart()
{
Chart MyChart = new Chart();
AxisCollection MyAxes=new AxisCollection();
CategoryAxis AxesX =new CategoryAxis();
NumericAxis AxesY = new NumericAxis();
LineSeries MySerie1 = new LineSeries();
LineSeries MySerie2 = new LineSeries();

AxesX.Title = "Month";
AxesX.Fields = new string[1];
AxesX.Fields[0] = "Date";

AxesY.Minimum = 0;
AxesY.Fields = new string[2];
AxesY.Fields[0] = "Value1";
AxesY.Fields[1] = "Value2";

MyAxes.Add(AxesX);
MyAxes.Add(AxesY);

MySerie1.SeriesID = "IdSerie1";
MySerie1.Axis = Position.Left;
MySerie1.XField = new string[1];
MySerie1.XField[0] = "Date";
MySerie1.YField = new string[1];
MySerie1.YField[0] = "Value1";
MySerie1.Title = "Test1";


MySerie1.MarkerConfig = new SpriteAttributes();
MySerie1.MarkerConfig.Fill = "#00ff00";
MySerie1.MarkerConfig.Stroke = "#00ff00";
MySerie1.MarkerConfig.Type = SpriteType.Circle;
MySerie1.MarkerConfig.Size = 3;
MySerie1.MarkerConfig.Radius = 3;

MySerie1.Style = new SpriteAttributes();
MySerie1.Style.Fill = "#00ff00";
MySerie1.Style.Stroke = "#00ff00";
MySerie1.Style.StrokeWidth = 0;


MySerie2.SeriesID = "IdSerie2";
MySerie2.Axis = Position.Left;
MySerie2.XField = new string[1];
MySerie2.XField[0] = "Date";
MySerie2.YField = new string[1];
MySerie2.YField[0] = "Value2";
MySerie2.Title = "Test2";


MySerie2.MarkerConfig = new SpriteAttributes();
MySerie2.MarkerConfig.Fill = "#0000ff";
MySerie2.MarkerConfig.Stroke = "#0000ff";
MySerie2.MarkerConfig.Type = SpriteType.Circle;
MySerie2.MarkerConfig.Size = 3;
MySerie2.MarkerConfig.Radius = 3;

MySerie2.Style = new SpriteAttributes();
MySerie2.Style.Fill = "#0000ff";
MySerie2.Style.Stroke = "#0000ff";
MySerie2.Style.StrokeWidth = 0;
MyChart.StoreID = "stoCharts";
MyChart.Animate = true;

MyChart.Legend = true;
MyChart.Axes.Add(AxesX);
MyChart.Axes.Add(AxesY);
MyChart.Series.Add(MySerie1);
MyChart.Series.Add(MySerie2);

return MyChart;
}

private Panel BuildPanel()
{
return this.X().Panel()
.ID("panChart")
.Title("Chart")
.Padding(5)
.Add(BuildChart());
}

</script>

<!DOCTYPE html protected "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>Test Chart into panel</title>

<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />

</head>

<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" RethrowAjaxExceptions="True">

</ext:ResourceManager>
<%-- Data stores--%>
<ext:Store ID="stoCharts" runat="server" AutoLoad="True">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model ID="Model2" runat="server">
<Fields>
<ext:ModelField Name="Date" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>





</form>
</body>

</html>


Hide the 2 series then show only serie test1. You could see that the vertical axes is not redrawn to fit value of the series. When clicling on legend, the vertical axes must fit the value of series shown (best way) or seris must be drawn in the good "position" (worst way).

So bug, or wrong manipulation from my part?

Daniil
May 23, 2012, 1:07 PM
Hi,

At the first glance I would consider it a bug, but I'm not 100 % sure at the moment. We will investigate.

Here is the minimized example to reproduce.

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", 10, 200},
new object[] {"2", 15, 300},
new object[] {"3", 21, 452},
new object[] {"4", 1, 125},
new object[] {"5", 18, 214},
new object[] {"6", 30, 57},
new object[] {"7", 25, 38},
new object[] {"8", 14, 189},
new object[] {"9", 11, 170},
new object[] {"10", 9, 98},
new object[] {"11", 3, 78},
new object[] {"12", 45, 120}
};
this.Store1.DataBind();
}
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Store ID="Store1" runat="server">
<Reader>
<ext:ArrayReader />
</Reader>
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Month" />
<ext:ModelField Name="Value1" />
<ext:ModelField Name="Value2" />
</Fields>
</ext:Model>
</Model>
</ext:Store>

<ext:Window
runat="server"
Height="400"
Width="300"
Layout="FitLayout">
<Items>
<ext:Chart runat="server" StoreID="Store1" Legend="true">
<Axes>
<ext:CategoryAxis Title="Month" Fields="Month" />
<ext:NumericAxis Fields="Value1,Value2" />
</Axes>
<Series>
<ext:LineSeries
Title="Test 1"
Axis="Left"
XField="Month"
YField="Value1" />
<ext:LineSeries
Title="Test 2"
Axis="Left"
XField="Month"
YField="Value2" />
</Series>
</ext:Chart>
</Items>
</ext:Window>
</body>
</html>

feanor91
May 23, 2012, 1:12 PM
Hum, yes...A little shorter, lol

Vladimir
May 24, 2012, 3:14 PM
I would not consider it is as a bug
But I agree thatsuch behaviour can be useful
We added RefreshOnItemToggle property to LegenedConfig, if set true then chart will be refreshed and axis is updated


<LegendConfig RefreshOnItemToggle="true" />


Please update from SVN and retest

feanor91
May 24, 2012, 3:45 PM
Thanks, I will test tomorrow. The property is set to true by default, right?

Vladimir
May 24, 2012, 4:23 PM
No, it is false by default

feanor91
May 25, 2012, 7:59 AM
Works perfectly. Thanks a lot

Daniil
Jun 04, 2012, 9:38 AM
Generally, we would consider it a bug. I have reported it to Sencha. Lets wait what they will answer.
http://www.sencha.com/forum/showthread.php?214114

feanor91
Jun 04, 2012, 9:43 AM
OK, but, with the modification made in SVN, it works well.

Daniil
Jun 04, 2012, 6:47 PM
Yes, but it would be best to fix it on Sencha level.

By the way, they have opened a bug ticket.

feanor91
Jun 05, 2012, 7:23 AM
Of course, you'r right, at least for peoples who use only Ext.JS.

Daniil
Jun 05, 2012, 10:20 AM
Yes.

It also helps to do not blow Ext.NET to the excessive size.

So, we will remove our fix when it will be fixed by Sencha. We will notify you updating the current thread.

feanor91
Jun 05, 2012, 10:45 AM
OK, I undesrtand

Daniil
Aug 27, 2012, 6:25 AM
The bug has been fixed in ExtJS 4.1.1 and applied for v2.1.

Respectively, the RefreshOnItemToggle option has been removed.

Thanks again for the report.