[CLOSED] Problem in vertical axes drawing in charts

[feanor91]

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]

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]

Hum, yes...A little shorter, lol

[Vladimir]

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]

Thanks, I will test tomorrow. The property is set to true by default, right?

[Vladimir]

No, it is false by default

[feanor91]

Works perfectly. Thanks a lot

[Daniil]

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]

OK, but, with the modification made in SVN, it works well.

[Daniil]

Yes, but it would be best to fix it on Sencha level.

By the way, they have opened a bug ticket.