How to Filter a Graph by using a button selector

[Lakshman]

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

[Iliana Dyankova]

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

 

 

[Lakshman]

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?

[Lakshman]

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?

 

 

 

[Iliana Dyankova]

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