This is a migrated thread and some comments may be shown as answers.

How to Filter a Graph by using a button selector

4 Answers 99 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Lakshman
Top achievements
Rank 1
Lakshman asked on 03 Nov 2016, 08:52 AM

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

4 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 03 Nov 2016, 01:03 PM
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.
 
0
Lakshman
Top achievements
Rank 1
answered on 04 Nov 2016, 05:54 AM

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?

0
Lakshman
Top achievements
Rank 1
answered on 04 Nov 2016, 07:32 AM

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?

 

 

 

0
Iliana Nikolova
Telerik team
answered on 07 Nov 2016, 11:28 AM
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.
 
Tags
Charts
Asked by
Lakshman
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Lakshman
Top achievements
Rank 1
Share this question
or