[FIXED] [#1497] [4.3.0] Refreshin chart legend

Page 1 of 2 12 LastLast
  1. #1

    [FIXED] [#1497] [4.3.0] Refreshin chart legend

    Hello

    Is there a way to refresh a chart legen on data reload?

    I have a polar chart in which I may display data for different month, except name data could change from month to month (country name).

    Chart is well updated on data reload but legend is not : in this capture; you can see Finlande mus be renamed in Réunion, and it is not.
    Attached Thumbnails Click image for larger version. 

Name:	2017-06-19 16_38_44-ResMed e-RMA portal.jpg 
Views:	61 
Size:	54.7 KB 
ID:	24998  
    Last edited by fabricio.murta; Jun 21, 2017 at 2:27 PM.
  2. #2
    Hello @feanor91!

    I don't see an issue with reloading the charts when legend might change. I believe a test case would be required, so that we can advise you on how to properly handle it.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Please look legend and data on the chart, little percentage are good for the chart, but legend is the one from the first load of the chart (only month changes).

    I only need to know how to render the chart data and legend accurate. All example you have are only for same data (data1,2,3...) or for month and of course, months nether changes and your data name are always the same, for me it is not the case, it is the top 10 contributors month by month and of course, this top 10 changes every month, particularly for lover percentage.

    It will be very complicated to fulfill a test case I think.
  4. #4
    Hello @feanor91,

    Well, I'm afraid we can't help much without being able to reproduce the issue at our side.

    But if you ever find a way to make a test case to reproduce this, we will definitely be going to find you a solution, file an issue or provide a workaround to get you back up to speed!

    Hope you understand.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Hi

    Here test case.
    Click on button to change data. As you can see dataname in chart changes but legend doesn't reflect the change.

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Drawing" %>
    <%@ Import Namespace="System.IO" %>
    
    <script runat="server">
        protected void DataSet1(object sender, DirectEventArgs e)
        {
            this.chartTop10Country.GetStore().DataSource = this.DS1;
            this.chartTop10Country.GetStore().DataBind();
        }
    
            protected void DataSet2(object sender, DirectEventArgs e)
        {
            this.chartTop10Country.GetStore().DataSource = this.DS2;
            this.chartTop10Country.GetStore().DataBind();
        }
    
    
        private object[] DS1
        {
            get
            {
                return new object[]
                {
                    new object[] { "A", 71.72 },
                    new object[] { "B", 29.01 },
                    new object[] { "C", 83.81 },
                    new object[] { "D", 52.55 }
                };
            }
        }
    
        private object[] DS2
        {
            get
            {
                return new object[]
                {
                    new object[] { "E", 30 },
                    new object[] { "F", 45 },
                    new object[] { "G", 25 },
                    new object[] { "H", 10 }
                };
            }
        }
    
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title></title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
    
            <h1>Refresh legend sample</h1>
    
            <ext:Panel
                runat="server"
                Title="Area Chart"
                Width="800"
                Height="600"
                Layout="FitLayout">
                <TopBar>
                    <ext:Toolbar runat="server">
                        <Items>
                            <ext:ToolbarFill runat="server" />
    
                            <ext:Button
                                runat="server"
                                Text="Dataset 1"
                                Icon="ArrowRefresh"
                                OnDirectClick="DataSet1" />
                            <ext:Button
                                runat="server"
                                Text="DataSet 2"
                                Icon="ArrowRefresh"
                                OnDirectClick="DataSet2" />
                        </Items>
                    </ext:Toolbar>
                </TopBar>
                <Items>
                    <ext:PolarChart
                        ID="chartTop10Country"
                        runat="server"
                        Shadow="true"
                        InsetPadding="60"
                        InnerPadding="20">
                        <LegendSpriteConfig runat="server" />
                        <Store>
                            <ext:Store
                                runat="server"
                                AutoDataBind="true">
                                <Model>
                                    <ext:Model runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Country" />
                                            <ext:ModelField Name="Created" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                        <Interactions>
                            <ext:ItemHighlightInteraction />
                            <ext:RotateInteraction />
                        </Interactions>
                        <Series>
                            <ext:Pie3DSeries
                                AngleField="Created"
                                ShowInLegend="true"
                                Donut="30"
                                Distortion="0.6">
                                <Label Field="Country" Display="Rotate" FontSize="18" FontFamily="Arial" />
                            </ext:Pie3DSeries>
                        </Series>
                    </ext:PolarChart>
                </Items>
            </ext:Panel>
        </form>
    </body>
    </html>
  6. #6
    Hello!

    Thanks for the test case! I can see now this is specific to the Pie3D series and, if you start the page with preloaded data on the chart, the first time you change data the legend will be updated. This problem does not happen with the Pie (not 3D) series. So it shouldn't be difficult to give you a solution.

    Up front, if you just change your example to a PieSeries you'll see the legend being correctly updated.

    We'll come back soon with a solution for you!
    Fabrício Murta
    Developer & Support Expert
  7. #7
    Yes you're right. It works well with PieSerie.

    I have found another issue with pie3d anyway. I let tou find a solution for this one and will create a new thread soon :)
  8. #8
    Hello again, @mirwais!

    Just add the following line after your DataBind() calls on lines 10 and 16:

    this.chartTop10Country.Call("refreshLegendStore");
    Please notice this is indeed a bug and the solution provided above is using an ExtJS chart method not listed under AbstractChart documentation's methods list.

    Anyway, there's not any current fix not involving using this method, so you should be safe for the time being. Just letting you know, as there may be need to review it in the next Ext.NET releases.

    We will apply a fix in our Ext.NET code base, available from GitHub soon (we'll update here as the fix makes it to github).

    The issue has been logged under #1497 in our issue tracking system at github.
    Last edited by fabricio.murta; Jun 21, 2017 at 2:12 PM. Reason: improve readability and sense
  9. #9
    Hum...

    And what if I don't use a data bind function? I use an ajaxproxy to load data, could I put this after the reload call in JS?

    Answer :
    from JS I get an erro "refreshLegendStore" is not a function if I do App.chartTop10Country.refreshLegendStore(), but if I do the same function in Chrome console it works...

    from code behind after chart reload, if I do chartTop10Country.Call("refreshLegendStore"); it works but only when I do a new reload of previous dataset, so legend is update for previous data loaded and not the current one.

    So, solution is not working in my case.
    Last edited by feanor91; Jun 21, 2017 at 2:34 PM.
  10. #10
    Hello @feanor91!

    I'm am afraid that won't work then, as the ajax proxy just returns the data to be loaded. But then, you can bind the store's Load event a listener to call the method (App.chartTop10Country.refreshLegendStore()).

    Or...

    You can just pull the latest sources from github and use them, as the bug is fixed there as of now.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 6
    Last Post: Sep 18, 2015, 7:40 AM
  2. Replies: 2
    Last Post: Jul 23, 2014, 1:02 PM
  3. Replies: 5
    Last Post: Mar 11, 2014, 3:03 PM
  4. [OPEN] [#357] Column Chart legend showing incorrect
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 13
    Last Post: Oct 22, 2013, 4:00 AM
  5. [OPEN] [#77] Chart legend problems with large amount of series
    By MWM2Dev in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Dec 21, 2012, 4:23 AM

Posting Permissions