[CLOSED] Chart data manipulation

  1. #1

    [CLOSED] Chart data manipulation

    I want to transpose the data for a chart. For example, in your stacked bar chart example,
    https://examples2.ext.net/#/Chart/Bar/Stacked/

    I want the years to be constant. I always want to look at 2005 - 2008. But the number of movie genres can be different. How can I construct my chart and data to make the genres dynamic? There will be a filter on the page that will change the genres shown in the chart.
    Last edited by Daniil; May 06, 2014 at 6:54 AM. Reason: [CLOSED]
  2. #2
    Hi @jchau,

    You can bind a new data to Store. The example below demonstrates it. Though, as you can see it doesn't update the NumericAxis's Fields and BarSeries's YField. So, I guess the only stable solution is to re-render the Chart with new settings.

    Example
    <%@ Page Language="C#" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.Store1.Data = new object[]
                { 
                    new { Year = 2005, Comedy = 34000000, Action = 23890000, Drama = 18450000, Thriller = 20060000 },
                    new { Year = 2006, Comedy = 56703000, Action = 38900000, Drama = 12650000, Thriller = 21000000 },
                    new { Year = 2007, Comedy = 42100000, Action = 50410000, Drama = 25780000, Thriller = 23040000 },
                    new { Year = 2008, Comedy = 38910000, Action = 56070000, Drama = 24810000, Thriller = 26940000 }
                };
            }
        }
    
        protected void Button_DirectClick(object sender, DirectEventArgs e)
        {
            this.Store1.DataSource = new List<object> 
                { 
                    new { Year = 2005, Comedy = 34000000, Drama = 18450000 },
                    new { Year = 2006, Comedy = 56703000, Drama = 12650000 },
                    new { Year = 2007, Comedy = 42100000, Drama = 25780000 },
                    new { Year = 2008, Comedy = 38910000, Drama = 24810000 }
                };
    
            this.Store1.DataBind();
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <ext:Button runat="server" Text="2 genres" OnDirectClick="Button_DirectClick" />
    
            <ext:Panel
                runat="server"
                Width="800"
                Height="400"
                Title="Stacked Bar Chart - Movies by Genre"
                Layout="FitLayout">
                <Items>
                    <ext:Chart
                        ID="Chart1"
                        runat="server"
                        Shadow="true"
                        Animate="true">
                        <Store>
                            <ext:Store ID="Store1" runat="server">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Year" />
                                            <ext:ModelField Name="Comedy" />
                                            <ext:ModelField Name="Action" />
                                            <ext:ModelField Name="Drama" />
                                            <ext:ModelField Name="Thriller" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
    
                        <LegendConfig Position="Right" />
    
                        <Axes>
                            <ext:NumericAxis Fields="Comedy,Action,Drama,Thriller" Position="Bottom" Grid="true">
                                <Label>
                                    <Renderer Handler="return String(value).replace(/000000$/, 'M');" />
                                </Label>
                            </ext:NumericAxis>
    
                            <ext:CategoryAxis Fields="Year" Position="Left" />
                        </Axes>
    
                        <Series>
                            <ext:BarSeries
                                Axis="Bottom"
                                Gutter="80"
                                XField="Year"
                                YField="Comedy,Action,Drama,Thriller"
                                Stacked="true">
                                <Tips runat="server" TrackMouse="true" Width="65" Height="28">
                                    <Renderer Handler="this.setTitle(String(item.value[1] / 1000000) + 'M');" />
                                </Tips>
                            </ext:BarSeries>
                        </Series>
                    </ext:Chart>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  3. #3
    Yea, that also requires me to know the max number of genres too which I may not. Is it possible to use XRender with Charts? If in my aspx view, I have a chart already, how do I completely re-render it?
  4. #4
    This should work:
    Chart1.Render();

Similar Threads

  1. Line Chart with Dynamic Data.
    By aditi in forum 2.x Help
    Replies: 0
    Last Post: Mar 10, 2014, 4:48 AM
  2. [CLOSED] Filtering Chart Data
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: Aug 21, 2013, 3:38 PM
  3. [CLOSED] Chart Export Data
    By cwolcott in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Nov 08, 2012, 1:01 PM
  4. [CLOSED] hierarchical data manipulation on client side
    By coleg123 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 11, 2011, 3:37 PM
  5. [CLOSED] Dynamic content whitespace manipulation
    By conman in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jan 29, 2009, 8:03 AM

Posting Permissions