Checked List of CategoryAxis items

3 posts, 0 answers
  1. John
    John avatar
    23 posts
    Member since:
    Jan 2015

    Posted 02 Feb 2015 Link to this post

    I have a requirement to have a multi-series column chart with the series legend on the top AND have the list of categoryAxis items in a "legend" on the right (in the location where a right series legend would be) - the categoryAxis items in the right "legend" area will be checkboxes and the user can check/uncheck a categoryAxis item and have it show/hide in the chart dynamically.

    Given the chart here, the addition would be having the categoryAxis items (2002, 2003, etc) as a list of checkboxes off to the right of the chart (initially all checked). When you uncheck an item, that categoryAxis item would disappear from the chart; when you check an item, it would appear in the chart. Unless specific logic was put in place, I guess you would be able to hide all categoryAxis items

    So, I have a couple questions:

    1. Can categoryAxis items be hidden/shown dynamically and have the rest of the data "fill the space" (so there wouldn't be a "gap" where the hidden categoryAxis used to be?) without having to refresh the dataSource?
    2. How do you recommend approaching the checkbox list of categoryAxis items?

  2. John
    John avatar
    23 posts
    Member since:
    Jan 2015

    Posted 03 Feb 2015 in reply to John Link to this post

    So, I'm working out the approach for #2 above - just putting a float div to the right of my chart div. That float div contains the list of checkboxes which I got from the dataBound event and

    I'm still trying to figure out #1 above - now that I've got my checkboxes and I'm subscribing to the click events, how can I show/hide the x axis item in the chart?

  3. Iliana Nikolova
    Iliana Nikolova avatar
    2622 posts

    Posted 04 Feb 2015 Link to this post

    Hi John,

    Hiding / showing categoryAxis labels is not supported by Kendo UI Chart. As a possible workaround I would suggest the following:
    - Bind the chart to a dataSource;
    - Use the dataSouce API to add / remove items.
    Note that when bound to a dataSource the chart will automatically refresh when this dataSource is changed.

    Iliana Nikolova
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top