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

Series Legend show/hide chart data programmatically

7 Answers 1333 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 19 Aug 2015, 06:58 PM

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​

7 Answers, 1 is accepted

Sort by
0
Ed
Top achievements
Rank 1
answered on 19 Aug 2015, 08:01 PM

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

0
Accepted
Iliana Nikolova
Telerik team
answered on 21 Aug 2015, 11:10 AM
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!
 
0
marco
Top achievements
Rank 2
answered on 21 Oct 2016, 02:38 PM

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

0
Iliana Nikolova
Telerik team
answered on 25 Oct 2016, 07:19 AM
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.
 
0
Feriansyah
Top achievements
Rank 1
answered on 10 Apr 2020, 09:38 AM

i have trouble with legendItemClick or series visibility in pie chart, how to show/hide legends with custom button in pie chart? datasource like this

[{"TOTAL":"67411887.5412","PRODUKSIVAL":14.96,"PRODUKSITYPE":"GAS"},{"TOTAL":"383320373.6999","PRODUKSIVAL":85.04,"PRODUKSITYPE":"OIL"}];

Thanks,

0
Alex Hajigeorgieva
Telerik team
answered on 14 Apr 2020, 07:59 AM

Hi, Feriansyah,

The Pie charts are a single series chart and to show and hide them with the toggleVisibility() method, you should pass a filter condition. If you wanted to have buttons as external legends, you could do something like this:

https://dojo.telerik.com/abiFUjEQ/3

      $(".k-button").click(function(e){
          var category = $(e.target).text();
          var series = chart.findSeriesByIndex(0);
          var point = series.findPoint(function(point) {
            return point.category === category;
          });                                                         
          var visible = point? false:true
          series.toggleVisibility(visible, function(item){
            return item.category == category;                                                        
}); });

Alternatively, you can create your own legend using the series.data[e.pointIndex] parameter as explained in this forum thread:

https://www.telerik.com/forums/series-name-is-undefined-on-custom-pie-chart-legend-items#MQ4jGh_BUk24OUzeIZTAdQ

Regards,
Alex Hajigeorgieva
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Feriansyah
Top achievements
Rank 1
answered on 14 Apr 2020, 08:39 AM
Thanks alex, is work like a charm
Tags
Charts
Asked by
Ed
Top achievements
Rank 1
Answers by
Ed
Top achievements
Rank 1
Iliana Nikolova
Telerik team
marco
Top achievements
Rank 2
Feriansyah
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or