[OPEN] [#77] Chart legend problems with large amount of series

Page 1 of 2 12 LastLast
  1. #1

    [OPEN] [#77] Chart legend problems with large amount of series

    Hello!

    I have an issue with the chartlegends for a linechart we are using the linechart has 20 or so series and the legend runs out of bounds when we turn it on. I looked around in the legend but can't find a way to force it to show a number of colomns or something similar it seems it always uses one column or one line to show all the series in the legend.
    Is there a way I can force the legend to use multiple rows and/or columns?

    small example code we are using to produce this error:

                for (int i = 4; i <= 20; i++)
                {
                    serie = new LineSeries();
                    serie.SeriesID = "line" + i.ToString();
                    serie.YField = new[] { "data2" };
                    serie.XField = new[] { "periode2" };
                    serie.Axis = Position.Left;
                    Chart1.Series.Add(serie);
                }
    and a picture of the problem
    Click image for larger version. 

Name:	Capture.PNG 
Views:	236 
Size:	32.3 KB 
ID:	4665
    Last edited by Daniil; Dec 10, 2012 at 5:55 AM. Reason: [OPEN] [#77]
  2. #2
    Hi,

    Welcome to Ext.NET!

    Thanks for the report.

    I also can't see any config options to organize it. Hopefully, I missed something.

    I have reported it to Sencha.
    http://www.sencha.com/forum/showthread.php?238486

    Lets wait what they will answer.
  3. #3
    Hey,

    Thanks for the reply! see they classified it as a bug, will find a work around for now using checkboxes and direct events to hide series using showall() and hideall() (or something similar using javascript)

    One more question, different issue though I sometimes have null values in my lines coming from my database (this is intended sometimes we don't have data for a certain month)

    is there a way for a line chart to show a gap? Now it just bumps to the 0 line and looks just silly (and it's actually wrong from a data standpoint) so the data we get is worked up like this

    Month - Data - Data2
    2012-01 - NULL - 12
    2012-02 - 2 - 13
    2012-03 - 4 - 4
    etc.

    is there a way for ext not to display the first point of data in a series? I haven't been able to get it to work sadly. I will add a code sample tomorrow if needed but the gist is in the text.
  4. #4
    Please keep one issue per one thread in the future. Just it's our policy to make the things clearly.

    Quote Originally Posted by MWM2Dev View Post
    is there a way for a line chart to show a gap?
    I am afraid LineSeries cannot be discrete. You could split it to several LineSeries. But, sure, most likely it will be inappropriate.

    Quote Originally Posted by MWM2Dev View Post
    is there a way for ext not to display the first point of data in a series?
    Maybe remove this point from a data before binding?
  5. #5
    Quote Originally Posted by Daniil View Post
    I am afraid LineSeries cannot be discrete. You could split it to several LineSeries. But, sure, most likely it will be inappropriate.
    I have asked on Sencha:
    http://www.sencha.com/forum/showthread.php?238541
  6. #6
    Created a small work around with javascript to use while a fix is being found

    The javascript
    //Javascript functions used to hide or show series in a chart
    function highlightSeries(chart, serie) {
        if (chart != undefined) {
            App[chart].series.items[serie].highlightItem();
        }
    }
    function unHightlightSeries(chart, serie) {
        if (chart != undefined) {
            App[chart].series.items[serie].unHighlightItem();
        }
    }
    function hideOrShowSeries(chart, serie, legenditem) {
        if (chart != undefined) {
            if (App[chart].series.get(serie).seriesIsHidden) {
                App[chart].series.get(serie).showAll();
                legenditem.setAttribute("class", "LegendTerm"); 
            } else {
                App[chart].series.get(serie).hideAll();
                legenditem.setAttribute("class", "LegendTermDisabled"); 
            }
        }
    }
    The C# code

      /// <summary>
        /// Class used to create legends for charts. 
        /// </summary>
        public class LegendChart
        {
            /// <summary>
            /// Returns a legend for the selected series and charts
            /// </summary>
            /// <param name="chartId">
            /// The chart Id.
            /// </param>
            /// <param name="names">
            /// The names.
            /// </param>
            /// <param name="colors">
            /// The colors.
            /// </param>
            /// <param name="width">
            /// The width.
            /// </param>
            /// <returns>
            /// a panel containing a legend for the chart. 
            /// </returns>
            public Panel Legend(string chartId, string[] names, Color[] colors, int width)
            {
                var legendPanel = new Panel 
                {
                     Width = width, Height = 100, CssClass = "chartLegend"
                };
    
                var numberColumns = width / 110;
                var numberRows = (names.Length - 1) / numberColumns + 1;
                var counter = 0;
    
                legendPanel.Height = numberRows * 20;
                for (var i = 0; i < numberColumns; i++)
                {
                    if (counter > names.Length - 1)
                    {
                        break;
                    }
                    var column = new Panel();
                    column.Style.Add("display", "table-cell");
                    column.Style.Add("vertical-align", "top");
                    for (var j = 0; j < numberRows; j++)
                    {
                        if (counter > names.Length - 1)
                        {
                            break;
                        }
    
                        var term = new Panel();
                        term.CssClass = "LegendTerm";
                        term.Attributes.Add("onmouseover", "highlightSeries('" + chartId + "'," + counter + ")");
                        term.Attributes.Add("onmouseout", "unHightlightSeries('" + chartId + "'," + counter + ")");
                        term.Attributes.Add("onclick", "hideOrShowSeries('" + chartId + "'," + counter + ", this)");
                        var colorLit = new Literal();
                        colorLit.Text = @"<div class='LegendColor' style='background-color:" + ColorTranslator.ToHtml(colors[counter]) + ";' ></div><div style='width:90px;'>" + names[counter] + "</div>";
                        term.Controls.Add(colorLit);
                        column.Controls.Add(term);
                        counter = counter + 1;
                    }
    
                    legendPanel.Controls.Add(column);
                }
    
                return legendPanel;
            }
        }
    and the code that calls on the legend creation

    var names = new List<string>();
    foreach (var lineData in pointDataList)
    {
        names.Add(lineData.name);
     }
    //Get the clientid substring to remove the app in front of it so we can use it in javascript. 
    var legendary = chartLegend.Legend(linechart.ClientID.Substring(4), names.ToArray(), chartdrawer.ColorPalette, 600);
    note that you are required to have an ID set for the chart else you won't be able to find it with the clientid supplied.

    Let me know when the bug is fixed!

    Thanks!
  7. #7
    Interesting, thanks for sharing! Could you explain a bit what does the workaround actually do?
  8. #8
    hey!
    Made a few screens of what it actually does, the code makes a new legend that is linked to the chart the id is supplied to (which opens up ideas for linking one legend to multiple graphs as well..)

    The legend that is made has click events and mouse over (I don't have enough data in my current data set to show the mouse over more clearly)

    Click image for larger version. 

Name:	newlegend.png 
Views:	207 
Size:	8.6 KB 
ID:	4674
    The new legend with rows and columns, the amount of rows

    Click image for larger version. 

Name:	newlegendclicked.png 
Views:	165 
Size:	6.7 KB 
ID:	4675
    When you click one of the items it changes the class so you can put css on it to change the style (I added some opacity in this example)
    You can see it hides the top point for the testuser6 when clicked again the line will show again, its all javascript so it won't do any posts backs or anything like that.

    It can probably be improved and it might contain some small bugs that need to be fixed, but its a good starting point if you run into this issue.

    If there is more clarification needed just ask!
  9. #9
    Good, thanks for clarification!

    Please clarify did you see the SmartLegend class that @Mitchell refers here?
    http://www.sencha.com/forum/showthre...l=1#post875507

    Looks good as well.
    Last edited by Daniil; May 06, 2014 at 5:45 AM.
  10. #10
    Regarding gaps in LineSeries. Sencha says it is slated for 4.2 release.
    http://www.sencha.com/forum/showthread.php?238541
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 2
    Last Post: Aug 13, 2012, 2:12 PM
  2. [CLOSED] Text on Series and Tool tips for Grouped Bar Chart
    By WHISHWORKS in forum 2.x Premium Help
    Replies: 3
    Last Post: Jul 16, 2012, 10:59 AM
  3. On the ext.net v2.x gauge chart problems
    By huidesy in forum 2.x Help
    Replies: 8
    Last Post: Jul 05, 2012, 8:07 PM
  4. Layout of large amount of UI elments
    By fangmdu in forum 2.x Help
    Replies: 1
    Last Post: Jul 02, 2012, 11:25 PM
  5. [CLOSED] Large amount of text in GridPanel
    By mattwoberts in forum 1.x Premium Help
    Replies: 4
    Last Post: Jan 24, 2012, 6:48 AM

Posting Permissions