Series Legend show/hide chart data programmatically

5 posts, 1 answers
  1. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 19 Aug 2015 Link to this post

    In this demo:

    http://demos.telerik.com/kendo-ui/bar-charts/column

    There is a legend on the top of the chart. If you click on one of the series in the legend, that data in the chart is not visible. Is there a way to programmatically do this? I want to provide this feature via an edit popup.

    Thanks,

    --Ed​

  2. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 19 Aug 2015 in reply to Ed Link to this post

    I've found this post which helps a little, assuming all the information is still up to date.

    http://www.telerik.com/forums/programmatically-trigger-legenditemclick-event

    A related question is: how can I tell if a series is shown/hidden via this legendItemClick mechanism?

    http://docs.telerik.com/KENDO-UI/api/javascript/dataviz/ui/chart#events-legendItemClick

    Thanks,

    --Ed

  3. Kendo UI is VS 2017 Ready
  4. Answer
    Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 21 Aug 2015 Link to this post

    Hi Ed,

    For this scenario I would suggest to dynamically change series visibility via the chart.options and redraw the chart. As an example: 
    // get reference to the chart widget
    var chart = $("#chart").data("kendoChart");
    // hide the second series
    chart.options.series[1].visible = false
    // redraw the chart
    chart.redraw();

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. marco
    marco avatar
    33 posts
    Member since:
    Sep 2007

    Posted 21 Oct Link to this post

    Which is the best way to hide some series, before rendering the chart, in order to avoid a double chart draw event?

  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 25 Oct Link to this post

    Hi Marco,

    You could hide series by setting their visible option to false

    http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.visible

    Regards,
    Iliana Nikolova
    Telerik by Progress
     
    Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
     
Back to Top
Kendo UI is VS 2017 Ready