Reset legend

[Egor]

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.

[Stefan]

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

[Egor]

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)

[Egor]

Oh, i got it. i`ve to use

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

now it`s work

[Stefan]

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

[Egor]

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();
        });

[Stefan]

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