Hide Label when all values are zero or null

4 posts, 0 answers
  1. Mike
    Mike avatar
    6 posts
    Member since:
    Aug 2014

    Posted 13 Mar 2015 Link to this post

    Hi,

    I was wondering if there is a way of hiding a label if all the values in that series are either zero or null? For example I've got a test block of code below:

    @(Html.Kendo().Chart(Model)
          .Name("ChartTest")
          .Legend(l => l.Visible(true))
          .Series(series =>
            {
                series.Column(x => x.WebSite01);
                series.Column(x => x.WebSite02);
                series.Column(x => x.WebSite03);
                series.Column(x => x.WebSite04);
                series.Column(x => x.WebSite05);
                series.Column(x => x.WebSite06);
                series.Column(x => x.WebSite07);
                series.Column(x => x.WebSite08);
                series.Column(x => x.WebSite09);
            }
          )
          .SeriesDefaults(s => s.Column().Stack(true))
          .Legend(l => l.Position(ChartLegendPosition.Bottom))
          .CategoryAxis(axis => axis
              .Categories(model => model.ChartDateStamp)
              .MajorGridLines(lines => lines.Visible(false))                     
              .Labels(l =>
              {
                  l.Format("MM/yy");
                  l.Rotation(90);
              })
          )
          .Tooltip(t => t
              .Visible(true)
              .Color("#FFFFFF")
              .Background("#0000CC")
              .Template("${series.name} : #= kendo.toString(value, 'n') #")      
          )
      )


    This is all fine and works as I'd expect however in my test data WebSite02 is all NULL and WebSite06 is all 0.00 value so there is no point in showing this information on a label, see the diagram attached. What I would like to do is hide the label for Website02 and Website06 as they will clutter the chart and in my real world example I could have 70+ items in there!

    I've tried doing this from Javascript but run into issues getting a tool tip working as well as putting custom labels in under the chart so due to time constraints am settling with this way for this version.

    If it helps, I've also included a screen grab of the raw data.

    Thanks in advance
    Mike


  2. Mike
    Mike avatar
    6 posts
    Member since:
    Aug 2014

    Posted 16 Mar 2015 Link to this post

    Hi,

    Just thought I'd answer my own question as found the answer on the forums, you simply do the following to hide a legend.

    series[count].visible = -1;
    series[count].visibleInLegend = false;

    Hope this helps others
    Mike
  3. Yeyuan
    Yeyuan avatar
    3 posts
    Member since:
    Mar 2017

    Posted 02 Oct in reply to Mike Link to this post

    Do you add these two lines inside of .Series(series =>{}) ?

    Why I'm adding them but encounter the error saying that the 'count' does not exist in the current context

    Could you post the forum link where you find your solution?

    Thanks!

  4. Stefan
    Admin
    Stefan avatar
    1153 posts

    Posted 04 Oct Link to this post

    Hello, Yeyuan,

    The desired result can be achieved using the legend.item.visual property of the Chart. It will allow using custom logic to determine which legend item has to be added and which does not:

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-legend.item.visual

    MVC:

    http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI.Fluent/ChartLegendItemBuilder#methods-Visual(System.String)

    https://dojo.telerik.com/IqeDA

    I hope this is helpful.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top