[CLOSED] Chart - Change axis label dynamically

  1. #1

    [CLOSED] Chart - Change axis label dynamically

    Hi all,

    please consider the following modified example (Chart.Column.BrowserStats)

    I would change X axis label according to the YEAR COMBO selected value

    What should it be necessary to do to refresh the labels (new value of MM-YYYY) ?

    Thanks in advance

    
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <script runat="server">
        protected void ReloadData(object sender, DirectEventArgs e)
        {
            Store store = this.Chart1.GetStore();
    
            store.DataSource = GenerateData(Convert.ToInt32(cmbYear.SelectedItem.Value.ToString()), 5, 0);
            store.DataBind();
    
            // ??????
            this.Chart1.Render();
            // this.Chart1.Redraw();
            // ??????
        }
    
        public static List<ChartData> GenerateData(int year, int n, int floor)
        {
            List<ChartData> data = new List<ChartData>(n);
            Random random = new Random();
            double p = (random.NextDouble() * 11) + 1;
    
            for (int i = 0; i < n; i++)
            {
                data.Add(new ChartData
                {
                    // ========================== new value according to year combo selection =====================
                    Name = (i+1).ToString().PadLeft(2,'0')+"-"+year.ToString(),
                    // ============================================================================================
                    Data1 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                    Data2 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                    Data3 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                    Data4 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                    Data5 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                    Data6 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                    Data7 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                    Data8 = Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                    Data9 = Math.Floor(Math.Max(random.NextDouble() * 100, floor))
                });
            }
    
            return data;
        }
    
        public class ChartData
        {
            public string Name
            {
                get;
                set;
            }
    
            public double Data1
            {
                get;
                set;
            }
    
            public double Data2
            {
                get;
                set;
            }
    
            public double Data3
            {
                get;
                set;
            }
    
            public double Data4
            {
                get;
                set;
            }
    
            public double Data5
            {
                get;
                set;
            }
    
            public double Data6
            {
                get;
                set;
            }
    
            public double Data7
            {
                get;
                set;
            }
    
            public double Data8
            {
                get;
                set;
            }
    
            public double Data9
            {
                get;
                set;
            }
        }
    
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Column Chart - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script>
            var saveChart = function (btn) {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
                    if (choice == 'yes') {
                        btn.up('panel').down('chart').save({
                            type: 'image/png'
                        });
                    }
                });
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            Column Chart Sample</h1>
        <p>
            Display a sets of random data in a column series. Reload data will randomly generate
            a new set of data in the store.</p>
        <ext:ChartTheme ID="FancyTheme" runat="server" ThemeName="Fancy" Colors="url(#v-1),url(#v-2),url(#v-3),url(#v-4),url(#v-5)">
            <Axis Stroke="#eee" />
            <AxisLabelLeft Fill="#eee" />
            <AxisLabelBottom Fill="#eee" />
            <AxisTitleLeft Fill="#eee" />
            <AxisTitleBottom Fill="#eee" />
        </ext:ChartTheme>
        <ext:Panel ID="Panel1" runat="server" Title="Column Chart" Width="800" Height="600"
            Layout="FitLayout">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Reload Data" Icon="ArrowRefresh" OnDirectClick="ReloadData" />
                        <ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
                        <ext:ComboBox ID="cmbYear" runat="server" Width="200" EmptyText="Select Year" AllowBlank="false"
                            FieldLabel="Year">
                            <Items>
                                <ext:ListItem Text="2014" />
                                <ext:ListItem Text="2013" />
                                <ext:ListItem Text="2012" />
                                <ext:ListItem Text="2011" />
                            </Items>
                        </ext:ComboBox>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:Chart ID="Chart1" runat="server" Theme="Fancy" Shadow="true">
                    <AnimateConfig Easing="BounceOut" Duration="750" />
                    <Store>
                        <ext:Store ID="Store1" runat="server" Data="<%# GenerateData(2014, 5, 0) %>" AutoDataBind="true">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Background Fill="rgb(17, 17, 17)" />
                    <Gradients>
                        <ext:Gradient GradientID="v-1" Angle="0">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="rgb(212, 40, 40)" />
                                <ext:GradientStop Offset="100" Color="rgb(117, 14, 14)" />
                            </Stops>
                        </ext:Gradient>
                        <ext:Gradient GradientID="v-2" Angle="0">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="rgb(180, 216, 42)" />
                                <ext:GradientStop Offset="100" Color="rgb(94, 114, 13)" />
                            </Stops>
                        </ext:Gradient>
                        <ext:Gradient GradientID="v-3" Angle="0">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="rgb(43, 221, 115)" />
                                <ext:GradientStop Offset="100" Color="rgb(14, 117, 56)" />
                            </Stops>
                        </ext:Gradient>
                        <ext:Gradient GradientID="v-4" Angle="0">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="rgb(45, 117, 226)" />
                                <ext:GradientStop Offset="100" Color="rgb(14, 56, 117)" />
                            </Stops>
                        </ext:Gradient>
                        <ext:Gradient GradientID="v-5" Angle="0">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="rgb(187, 45, 222)" />
                                <ext:GradientStop Offset="100" Color="rgb(85, 10, 103)" />
                            </Stops>
                        </ext:Gradient>
                    </Gradients>
                    <Axes>
                        <ext:NumericAxis Fields="Data1" Title="Number of Hits" Minimum="0" Maximum="100">
                            <Label>
                                <Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
                            </Label>
                            <GridConfig>
                                <Odd Stroke="#555" />
                                <Even Stroke="#555" />
                            </GridConfig>
                        </ext:NumericAxis>
                        <ext:CategoryAxis Position="Bottom" Fields="Name" Title="Month of the Year" />
                    </Axes>
                    <Series>
                        <ext:ColumnSeries Axis="Left" Highlight="true" XField="Name" YField="Data1">
                            <Label Display="InsideEnd" Field="Data1" Orientation="Horizontal" Fill="#fff" Font="17px Arial"
                                TextAnchor="middle">
                                <Renderer Handler="return Ext.util.Format.number(value, '0');" />
                            </Label>
                            <Style Opacity="0.95" />
                            <Renderer Handler="var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)','url(#v-5)'];attributes.fill = colors[index % colors.length]; return attributes;" />
                        </ext:ColumnSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by Daniil; Feb 05, 2014 at 12:00 PM. Reason: [CLOSED]
  2. #2
    I saw that everytime the store is reloaded through button [RelodData], due to Data Property set for the store, data are loaded twice, first with the combo value by the explicit store databinding and then with the same init value (2014) configured on the store through the Data property event.....

    setting off the Data property for the store and loading init data just for the first time in Page_Load method it works as expected.

    Anyway, it seems that Store Data Property event fires everytime a store databinding is done. Is it correct ?

    <%@ 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)
            {
                Store store = this.Chart1.GetStore();
    
                store.DataSource = GenerateData(DateTime.Now.Year, 9, 0);
                store.DataBind();
            }
        }
    
        protected void ReloadData(object sender, DirectEventArgs e)
        {
            Store store = this.Chart1.GetStore();
    
            store.DataSource = GenerateData(Convert.ToInt32(cmbYear.SelectedItem.Value.ToString()), 9, 0);
            store.DataBind();
        }
    
        public static List<ChartData> GenerateData(int year, int n, int floor)
        {
            List<ChartData> data = new List<ChartData>(n);
            Random random = new Random();
            int h = 0;
            for (int i = 0; i < n; i++)
            {
                data.Add(new ChartData
                {
                    // ========================== new value according to year combo selection =====================
                    Name = (i + 1).ToString().PadLeft(2, '0') + "-" + year.ToString(),
                    // ============================================================================================
                    Data1 = (year - 2000) + (h++) // Math.Floor(Math.Max(random.NextDouble() * 100, floor)),
                });
            }
    
            return data;
        }
    
        public class ChartData
        {
            public string Name
            {
                get;
                set;
            }
    
            public double Data1
            {
                get;
                set;
            }
        }
    
    </script>
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <title>Column Chart - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script>
            var saveChart = function (btn) {
                Ext.MessageBox.confirm('Confirm Download', 'Would you like to download the chart as an image?', function (choice) {
                    if (choice == 'yes') {
                        btn.up('panel').down('chart').save({
                            type: 'image/png'
                        });
                    }
                });
            };
        </script>
    </head>
    <body>
        <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <h1>
            Column Chart Sample</h1>
        <p>
            Display a sets of random data in a column series. Reload data will randomly generate
            a new set of data in the store.</p>
        <ext:ChartTheme ID="FancyTheme" runat="server" ThemeName="Fancy" Colors="url(#v-1),url(#v-2),url(#v-3),url(#v-4),url(#v-5)">
            <Axis Stroke="#eee" />
            <AxisLabelLeft Fill="#eee" />
            <AxisLabelBottom Fill="#eee" />
            <AxisTitleLeft Fill="#eee" />
            <AxisTitleBottom Fill="#eee" />
        </ext:ChartTheme>
        <ext:Panel ID="Panel1" runat="server" Title="Column Chart" Width="800" Height="600"
            Layout="FitLayout">
            <TopBar>
                <ext:Toolbar ID="Toolbar1" runat="server">
                    <Items>
                        <ext:Button ID="Button1" runat="server" Text="Reload Data" Icon="ArrowRefresh" OnDirectClick="ReloadData" />
                        <ext:Button ID="Button2" runat="server" Text="Save Chart" Icon="Disk" Handler="saveChart" />
                        <ext:ComboBox ID="cmbYear" runat="server" Width="200" EmptyText="Select Year" AllowBlank="false"
                            FieldLabel="Year">
                            <Items>
                                <ext:ListItem Text="2014" />
                                <ext:ListItem Text="2013" />
                                <ext:ListItem Text="2012" />
                                <ext:ListItem Text="2011" />
                            </Items>
                        </ext:ComboBox>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Items>
                <ext:Chart ID="Chart1" runat="server" Theme="Fancy" Shadow="true">
                    <AnimateConfig Easing="BounceOut" Duration="750" />
                    <Store>
                        <ext:Store ID="Store1" runat="server" AutoDataBind="false">
                            <Model>
                                <ext:Model ID="Model1" runat="server">
                                    <Fields>
                                        <ext:ModelField Name="Name" />
                                        <ext:ModelField Name="Data1" />
                                    </Fields>
                                </ext:Model>
                            </Model>
                        </ext:Store>
                    </Store>
                    <Background Fill="rgb(17, 17, 17)" />
                    <Gradients>
                        <ext:Gradient GradientID="v-1" Angle="0">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="rgb(212, 40, 40)" />
                                <ext:GradientStop Offset="100" Color="rgb(117, 14, 14)" />
                            </Stops>
                        </ext:Gradient>
                        <ext:Gradient GradientID="v-2" Angle="0">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="rgb(180, 216, 42)" />
                                <ext:GradientStop Offset="100" Color="rgb(94, 114, 13)" />
                            </Stops>
                        </ext:Gradient>
                        <ext:Gradient GradientID="v-3" Angle="0">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="rgb(43, 221, 115)" />
                                <ext:GradientStop Offset="100" Color="rgb(14, 117, 56)" />
                            </Stops>
                        </ext:Gradient>
                        <ext:Gradient GradientID="v-4" Angle="0">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="rgb(45, 117, 226)" />
                                <ext:GradientStop Offset="100" Color="rgb(14, 56, 117)" />
                            </Stops>
                        </ext:Gradient>
                        <ext:Gradient GradientID="v-5" Angle="0">
                            <Stops>
                                <ext:GradientStop Offset="0" Color="rgb(187, 45, 222)" />
                                <ext:GradientStop Offset="100" Color="rgb(85, 10, 103)" />
                            </Stops>
                        </ext:Gradient>
                    </Gradients>
                    <Axes>
                        <ext:NumericAxis Fields="Data1" Title="Number of Hits" Minimum="0" Maximum="100">
                            <Label>
                                <Renderer Handler="return Ext.util.Format.number(value, '0,0');" />
                            </Label>
                            <GridConfig>
                                <Odd Stroke="#555" />
                                <Even Stroke="#555" />
                            </GridConfig>
                        </ext:NumericAxis>
                        <ext:CategoryAxis Position="Bottom" Fields="Name" Title="Month of the Year" />
                    </Axes>
                    <Series>
                        <ext:ColumnSeries Axis="Left" Highlight="true" XField="Name" YField="Data1">
                            <Label Display="InsideEnd" Field="Data1" Orientation="Horizontal" Fill="#fff" Font="17px Arial"
                                TextAnchor="middle">
                                <Renderer Handler="return Ext.util.Format.number(value, '0');" />
                            </Label>
                            <Style Opacity="0.95" />
                            <Renderer Handler="var colors = ['url(#v-1)','url(#v-2)','url(#v-3)','url(#v-4)','url(#v-5)'];attributes.fill = colors[index % colors.length]; return attributes;" />
                        </ext:ColumnSeries>
                    </Series>
                </ext:Chart>
            </Items>
        </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by tanky65; Feb 05, 2014 at 10:13 AM. Reason: wrong consideration
  3. #3
    Hi @tanky65,

    Quote Originally Posted by tanky65 View Post
    Anyway, it seems that Store Data Property event fires everytime a store databinding is done. Is it correct ?
    Well, not really. Just a Store's DataBind call takes the Store's Data defined in the markup first, then the Store's DataSource is just ignored, because the Store is already bound with the Data.

    And it is expected behavior. We are going to update our examples removing this line:
    store.DataSource = Ext.Net.Examples.ChartData.GenerateData();
    Just a Store's DataBind call is enough in those examples.

    Thank you for bringing this problem to us.
  4. #4
    Quote Originally Posted by Daniil View Post
    And it is expected behavior. We are going to update our examples removing this line:
    store.DataSource = Ext.Net.Examples.ChartData.GenerateData();
    Just a Store's DataBind call is enough in those examples.

    Thank you for bringing this problem to us.
    Done in revision #5654.

Similar Threads

  1. Replies: 1
    Last Post: Nov 25, 2013, 6:13 PM
  2. Replies: 2
    Last Post: Oct 15, 2013, 5:18 AM
  3. [CLOSED] How to change label color for the chart.
    By tactime10 in forum 2.x Premium Help
    Replies: 3
    Last Post: May 30, 2013, 7:57 AM
  4. Replies: 2
    Last Post: Dec 28, 2012, 12:13 PM
  5. Replies: 2
    Last Post: Aug 13, 2012, 3:12 PM

Tags for this Thread

Posting Permissions