Chart: Is it a bug? configuring CHART from code behind

  1. #1

    Chart: Is it a bug? configuring CHART from code behind

    I'm trying to evaluate charting by configuring it in code behind but I get the following:

    Please, consider the following light example:

    it shows a stacked bar chart in the center using the comma separated value inserted in the textfield (north) to configure the bars.
    The two buttons switch between items and show only two of the five values available
    If i change the name of the bars in the textfield it doesn't take the new values, even if the component of the chart are new instances and the chart itself is rendered.
    Is it a bug or it is not handled ?

    Thanks

    Example

    A,B,C,D,E this is the default with the chart is rendered the first time. Value A (the first) is used to configure the CategoryAxes and the others are for NumericAxes

    if you change the items in the textfield to
    F,G,H,J,K these values are not taken, it seems the chart keep the old values even if the component are new instances.

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Xml.Xsl" %>
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Linq" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
    
        static string[] items = null;
    
        protected void Page_Load(object sender, EventArgs e)
        {
            items = txtChutes.Text.Split(',');
            //chutes = new string [] {"A","B","C","D","E"};
    
            build();
    
            if (!X.IsAjaxRequest)
            {
                makeChart(2);
            }
    
        }
    
        protected void build()
        {
            // clear store
            this.Store2.Model.Clear();
            this.Store2.Reader.Clear();
    
            // create new model
            Model m = new Model();
    
            m.Name = "Model1";
    
            m.Fields.Add(new ModelField(items[0]));
            for (int i = 0; i < items.Length; i++)
                m.Fields.Add(new ModelField(items[i], ModelFieldType.Int));
    
            // add the model to che store
            this.Store2.Model.Add(m);
    
            this.Store2.DataSource = new object[]
            {
                new object[] {"1", 10, 200,100,12},
                new object[] {"2", 15, 300,200,23},
                new object[] {"3", 21, 452,300,23},
                new object[] {"4", 1, 125,400,55},
                new object[] {"5", 18, 214,500,32},
                new object[] {"6", 30, 57,200,34},
                new object[] {"7", 25, 38,44,56},
                new object[] {"8", 14, 189,55,65},
                new object[] {"9", 11, 170,66,33},
                new object[] {"10", 9, 98,32,76},
                new object[] {"11", 3, 78,77,21},
                new object[] {"12", 45, 120,123,44}           
            };
    
            this.Store2.DataBind();
        }
    
        protected void btnClick1(object sender, DirectEventArgs e)
        {
            makeChart(1); //displays two items starting from position 1
        }
    
        protected void btnClick2(object sender, DirectEventArgs e)
        {
            makeChart(3); //displays two items starting from position 3
        }
    
        protected void makeChart(int start)
        {
            // set store for the chart
            this.Chart1.StoreID = "Store2";
    
            Chart1.Axes.Clear();
    
            // Create and config axes
            NumericAxis axis = new NumericAxis();
            CategoryAxis caxis = new CategoryAxis();
    
            axis.Fields = new string[] { items[start], items[start + 1] };
            axis.Maximum = null;
    
            caxis.Fields = new string[] { items[0] };
            caxis.Title = "Date";
    
            // Clear Chart1 series and create and configure a new serie
            Chart1.Series.Clear();
            ColumnSeries newSerie = new ColumnSeries();
            newSerie.SeriesID = "ISerie";
            newSerie.Axis = Position.Left;
            newSerie.XField = new string[] { items[0] };
            newSerie.YField = new string[] { items[start], items[start + 1] };
            // newSerie.Title = "Test";
            newSerie.Stacked = true;
    
            Chart1.Animate = true;
    
            // add serie to chart
            Chart1.Series.Add(newSerie);
            // ad axes to chart
            Chart1.Axes.Add(axis);
            Chart1.Axes.Add(caxis);
    
            // render because legend has changed
            this.Chart1.Render();
        }
    </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 id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Store ID="Store2" runat="server">
        </ext:Store>
        <ext:Window ID="Window1" runat="server" Height="600" Width="800" Layout="BorderLayout">
            <Items>
                <ext:Toolbar ID="Toolbar1" Region="North" Height="50" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Submit1" OnDirectClick="btnClick1">
                        </ext:Button>
                        <ext:Button ID="Button2" runat="server" Text="Submit2" OnDirectClick="btnClick2">
                        </ext:Button>
                        <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                        <ext:TextField ID="txtChutes" Name="txtChutes" Text="A,B,C,D,E" Height="50"
                    Width="200" runat="server" FieldLabel="Items" />
                    </Items>
                </ext:Toolbar>
                <ext:Chart ID="Chart1" runat="server" Region="Center" Legend="true" Shadow="true" StyleSpec="background:#fff" >
                </ext:Chart>
            </Items>
        </ext:Window>
        </form>
    </body>
    </html>
  2. #2

    don't know whether it is a bug or not but

    I tried to create a new chart every time a new request (button click) is done and it works.
    light code follows
    hope this helps
    Bye

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Data" %>
    <%@ Import Namespace="System.Xml.Xsl" %>
    <%@ Import Namespace="System.Xml" %>
    <%@ Import Namespace="System.Linq" %>
    <%@ Import Namespace="System.Data.SqlClient" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
    
        static string[] items = null;
        Store str = new Store();
        protected void Page_Load(object sender, EventArgs e)
        {
            items = txtChutes.Text.Split(',');
            //chutes = new string [] {"A","B","C","D","E"};
    
            if (!X.IsAjaxRequest)
            {
                build();
    
                makeChart(2);
            }
    
        }
    
        protected void build()
        {
            str = new Store();
            str.ID = "Store2";
            // clear store
            str.Model.Clear();
            str.Reader.Clear();
    
            // create new model
            Model m = new Model();
    
            m.Name = "Model1";
    
            m.Fields.Add(new ModelField(items[0]));
            for (int i = 1; i < items.Length; i++)
                m.Fields.Add(new ModelField(items[i], ModelFieldType.Int));
    
            // add the model to che store
            str.Model.Add(m);
    
            str.DataSource = new object[]
            {
                new object[] {"1", 10, 200,100,12},
                new object[] {"2", 15, 300,200,23},
                new object[] {"3", 21, 452,300,23},
                new object[] {"4", 1, 125,400,55},
                new object[] {"5", 18, 214,500,32},
                new object[] {"6", 30, 57,200,34},
                new object[] {"7", 25, 38,44,56},
                new object[] {"8", 14, 189,55,65},
                new object[] {"9", 11, 170,66,33},
                new object[] {"10", 9, 98,32,76},
                new object[] {"11", 3, 78,77,21},
                new object[] {"12", 45, 120,123,44}           
            };
    
            str.DataBind();
        }
    
        protected void btnClick1(object sender, DirectEventArgs e)
        {
            build();
            makeChart(1); //displays two items starting from position 1
        }
    
        protected void btnClick2(object sender, DirectEventArgs e)
        {
            build();
            makeChart(3); //displays two items starting from position 3
        }
    
        protected void makeChart(int start)
        {
    
            Chart Chart1 = new Chart();
            Chart1.ID = "Chart1";
            Chart1.Region = Region.Center;
            Chart1.Legend = true;
            Chart1.Shadow = true;
            Chart1.StyleSpec = "background:#fff";
    
            // Window1.Items.Remove(this.Chart1);
            Window1.Items.Add(Chart1);
    
            // set store for the chart
            Chart1.Store.Add(str);
            //Chart1.StoreID = "Store2";
            
            Chart1.Axes.Clear();
    
            // Create and config axes
            NumericAxis axis = new NumericAxis();
            CategoryAxis caxis = new CategoryAxis();
    
            axis.Fields = new string[] { items[start], items[start + 1] };
            axis.Maximum = null;
    
            caxis.Fields = new string[] { items[0] };
            caxis.Title = "Date";
    
            // Clear Chart1 series and create and configure a new serie
            Chart1.Series.Clear();
            ColumnSeries newSerie = new ColumnSeries();
            newSerie.SeriesID = "ISerie";
            newSerie.Axis = Position.Left;
            newSerie.XField = new string[] { items[0] };
            newSerie.YField = new string[] { items[start], items[start + 1] };
            // newSerie.Title = "Test";
            newSerie.Stacked = true;
    
            Chart1.Animate = true;
    
            // add serie to chart
            Chart1.Series.Add(newSerie);
            // ad axes to chart
            Chart1.Axes.Add(axis);
            Chart1.Axes.Add(caxis);
    
            // render because legend has changed
            Chart1.Render();
        }
    </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 id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:Window ID="Window1" runat="server" Height="600" Width="800" Layout="BorderLayout">
            <Items>
                <ext:Toolbar ID="Toolbar1" Region="North" Height="50" runat="server">
                    <Items>
                        <ext:Button ID="Button3" runat="server" Text="Print" Icon="Printer" OnClientClick="window.print();" />
                        <ext:Button ID="Button1" runat="server" Text="Submit1" OnDirectClick="btnClick1">
                        </ext:Button>
                        <ext:Button ID="Button2" runat="server" Text="Submit2" OnDirectClick="btnClick2">
                        </ext:Button>
                        <ext:ToolbarFill ID="ToolbarFill1" runat="server" />
                        <ext:TextField ID="txtChutes" Name="txtChutes" Text="A,B,C,D,E" Height="50" Width="200"
                            runat="server" FieldLabel="Items" />
                    </Items>
                </ext:Toolbar>
            </Items>
        </ext:Window>
        </form>
    </body>
    </html>
    Last edited by tanky65; Jun 02, 2012 at 7:15 AM. Reason: del unused code

Similar Threads

  1. [CLOSED] How to Export SVG chart from code behind
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 27, 2013, 6:20 AM
  2. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  3. [CLOSED] How to manage column colors in a chart from code behind.
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 04, 2012, 12:34 PM
  4. Replies: 0
    Last Post: May 30, 2012, 8:44 PM
  5. Chart
    By zanotto in forum 2.x Help
    Replies: 7
    Last Post: Mar 09, 2012, 11:47 AM

Tags for this Thread

Posting Permissions