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

Reset legend

6 Answers 250 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Egor
Top achievements
Rank 1
Egor asked on 09 Aug 2017, 01:55 PM
Hi there, i`ve a little question. how i can reset the legend of chart? i mean, when i`m turn of some series and refresh or redraw chart, the series stay turned off. Thx.

6 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 11 Aug 2017, 07:45 AM
Hello Egor,

The legend and the series visibility can be reset using the toggleVisibility method of the Chart. I can suggest retrieving all of the series and programmatically setting the visibility of all series to true:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/chart/chart_series#methods-toggleVisibility

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-findSeries

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-findSeriesByName

I made an example demonstrating how to show all series and reset the legend:

http://dojo.telerik.com/ULeye

I hope this is helpful.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Egor
Top achievements
Rank 1
answered on 11 Aug 2017, 08:25 AM

Fantastic! it`s works perfectly!! and i have another question)

I want to use local data for charts and filter it. I create a new data:

var data = new kendo.data.DataSource({
           data: [
                     {
                        "category": "K_01",
                        "value": "15847"
                     },
                     {
                        "category": "K_02",
                        "value": "124232"
                     },
                     {
                        "category": "K_21",
                        "value": "2342"
                     },
                 ],
  filter: { field: "category", operator: "startswith", value: "K" }
});

then call function:

function createChart() {
            $("#chart").kendoChart({
                title: {
                    text: "график"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
               dataSource: {
                    data: data
                },
                 series: [{
                    name: "2011",
                    type: "donut",
                    field: "value",
                    categoryField: "category",
                    labels: {
                        visible: true,
                        background: "transparent",
                        position: "outsideEnd",
                        template: "#= category #: \n #= value#%"
                    }
                }]
            });
        }
 
        $(document).ready(createChart);

but it's all crashes by error "TypeError: e.slice is not a function". Pls help me)

0
Egor
Top achievements
Rank 1
answered on 11 Aug 2017, 08:45 AM

Oh, i got it. i`ve to use

dataSource.fetch(function(){
var view = dataSource.view();
});

now it`s work

0
Stefan
Telerik team
answered on 15 Aug 2017, 05:14 AM
Hello Egor,

I'm glad to hear that the issue is resolved.

Also, it should work as expected if the local dataSource is passed to the Chart dataSource instance:

http://dojo.telerik.com/uxoxOw

dataSource: data

Also, please have in mind that we will appreciate if a separate ticket is submitted when the new question is not directly related to the first one, as this is helping us to determine which scenarios are most commonly used and based on that to improve the documentation in that direction.
 
Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Egor
Top achievements
Rank 1
answered on 15 Aug 2017, 06:30 AM

Thank you a lot! I have another trouble, when i`m using a local data in donut chart reset button doesn`t work( how i can reset legend whith a local data?

var dataSource = new kendo.data.DataSource({
           data: [
                     {
                        "name":"K_01",
                        "category": "K_01",
                        "value": "15847",
                     },
                     {
                        "name":"K_02",
                        "category": "K_02",
                        "value": "124232"
                     },
                     {
                        "name":"K_21",
                        "category": "K_21",
                        "value": "2342",
                     },
                     {
                        "name":"K_21",
                        "category": "K_21",
                        "value": "2342"
                     },
                     {
                        "name":"K_21",
                        "category": "K_21",
                        "value": "2342"
                     },
                 ]
        });
 
function createChart() {
            $("#chart").kendoChart({
                theme: "MyTheme",
                legend: {
                    visible: true
                },
                title: {
                    text: "график"
                },
                chartArea: {
                    background: ""
                },
               dataSource: {
                    data: view
                },
                 series: [{
                    name: "2011",
                    type: "donut",
                    field: "value",
                    categoryField: "category",
                    explodeField: "explode",
                    labels: {
                        visible: true,
                        background: "transparent",
                        position: "outsideEnd",
                        template: "#= category #: \n #= value#%"
                    }
                }]
            });
        }
 
 
        function redraw(){
            var chart = $('#chart').data('kendoChart')
            var seriesGet = chart.findSeries(function(series) {
              var currentSeries = chart.findSeriesByName(series.name);
              currentSeries.toggleVisibility(true);
              return $.inArray(3, series.data) >= 0;
           });
 
        }
 
        $('.k-button').click(function(){
            redraw();
        });
0
Stefan
Telerik team
answered on 16 Aug 2017, 10:36 AM
Hello Egor,

The issue occurs because when the Donut Chart is used, there is only one series, and the legend is made based on the different values(points) of the series.

In this scenario, the series points visibility has to be reset:

function redraw(){
  var chart = $('#chart').data('kendoChart')
  var seriesGet = chart.findSeries(function(series) {
    var currentSeries = chart.findSeriesByName(series.name);
    currentSeries.toggleVisibility(true, function(dataItem) {
      return dataItem.category !== "undefined";
    });
    return $.inArray(3, series.data) >= 0;
  });
}

I made an example demonstrating this:

http://dojo.telerik.com/uxoxOw/2

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Charts
Asked by
Egor
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Egor
Top achievements
Rank 1
Share this question
or