How to Filter a Graph by using a button selector

5 posts, 0 answers
  1. Lakshman
    Lakshman avatar
    7 posts
    Member since:
    Oct 2016

    Posted 03 Nov Link to this post

    Hi All,

    I am new to kendo UI.  The requirement from the client is that he wants 4 button selectors which will have the fact columns(i.e Revenue , cost etc) that will filter the graph.

    What is the best method to achieve this? How do I make this button selector filter the graph?

    Please give me some suggestions.

    Thanks,

    Lakshman

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 03 Nov Link to this post

    Hi Lakshman,

    Kendo UI Chart will automatically refresh when its dataSource is changed / filtered / sorted etc. In order to achieve the expected result you could use the dataSource filter method: 

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Lakshman
    Lakshman avatar
    7 posts
    Member since:
    Oct 2016

    Posted 04 Nov in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    Thanks for your reply. I have attached the mockup file. In that,you can see that there are 4 buttons in the first and below that there is a graph.As the user clicks the buttons the graph should filter according to that.Ex if the user clicks the 3rd button then the graph should display the data only for that selected button. 

    Is this possible in kendo UI.? if not is there any workaround to achieve this?

  5. Lakshman
    Lakshman avatar
    7 posts
    Member since:
    Oct 2016

    Posted 04 Nov in reply to Iliana Nikolova Link to this post

    Hi Iliana,

     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 a button selector. Is there a way to do this?

     

     

     

  6. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 07 Nov Link to this post

    Hi Lakshman,

    Up to the questions
    - ....As the user clicks the buttons the graph should filter according to that.Ex if the user clicks the 3rd button then the graph should display the data only for that selected button...
    As I mentioned in my first pot, to achieve this you should filter the chart dataSource:

    http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-filter


    - ...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?...
    Clicking legend items toggles series visibility. Yes, you could do this behavior programmatically via the chart options. Take a look at the following forum thread for more details as well as a code snippet: 

    http://www.telerik.com/forums/series-legend-show-hide-chart-data-programmatically#TuXioM3LpUq5PH0yWH8ZfQ

    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