Series Legend show/hide chart data programmatically

[Ed]

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​

[Ed]

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

[Iliana Dyankova]

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

 

 

[marco]

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

[Iliana Dyankova]

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

 

 

[Feriansyah]

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,

[Alex Hajigeorgieva]

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

[Feriansyah]

Thanks alex, is work like a charm