Legend not updating when dataseries are removed

[Casper]

Using kendo stock chart (2015.2.805)  with AngularJS (1.3.16) like this

Directive template:
<div kendo-stock-chart="graphCtrl.chartobject" k-options="graphCtrl.chartConfiguration" id="kendo-chart"></div>

Directive controller:
function graphDirectiveController($scope, $timeout, dataService) {
        var that = this;
        getConfiguration();

        that.chartConfiguration = {
            theme: "customTheme",
            dataSource: new kendo.data.DataSource({
                transport: {
                    read: function (options) {
                        bondCompareDataService.getGraphData(that.graphId, that.bondIds).then(function (result) {
                            options.success(result.data);
                        });
                    }
                },
                schema: {
                    model: {
                        fields: {
                            date: { type: "date" }
                        }
                    }
                }
            }),
            autoBind: false,
            title: {
                text: ""
            },
            legend: {
                position: "bottom",
                visible: true
            },
            chartArea: {
                margin: {
                    right: 40,
                    top: 20,
                    bottom: 20,
                    left: 10
                }
            },
            dateField: "date",
            categoryAxis: {
                labels: {
                    font: "12px Roboto, Helvetica, Arial"
                },
                title: {
                    color: "#dddddd"
                }
            },
            series: [],
            navigator: {
                series: {
                    field: "navigatorseries",
                    type: "line",
                    missingValues: "interpolate"
                },
                categoryAxis: {
                    labels: {
                        font: "12px Roboto, Helvetica, Arial"
                    }
                }
            }
        }

        function getConfiguration () {
            dataService.getGraphConfigurations(that.graphid).then(function (result) {
                var configurations = result.data;
                var chartOptions = that.chartobject.options;
                angular.forEach(configurations, function (config) {
                    chartOptions.series.push({
                        categoryField: "date",
                        name: config.name,
                        field: config.seriesKey,
                        type: "line",
                        markers: {
                            size: 2
                        },
                        tooltip: {
                            visible: true,
                            template: getTooltipTemplate(config.formatAs)
                        }
                    });
                });
                refreshData();
                that.chartobject.redraw();
            });
        }

        function refreshData () {
            that.chartobject.dataSource.read();
            that.chartobject.refresh();
        }

        function getTooltipTemplate (formatAs) {
            if (formatAs === "Rate") {
                return "<strong>#: series.name # </strong><br/> #: kendo.toString(category, 'd' )#: #: kendo.toString(value, 'n2')   #%";
            } else {
                return "<strong>#: series.name # </strong><br/> #: kendo.toString(category, 'd' )#: #: kendo.toString(value, 'n2')   #";
            }
        }
    }

From the outside of this directive I can remove data series and call the getConfiguration function which updates the graph correctly, except for the legend which keeps all the series. What do I need to do to remove the legend items which have no matching series?

 

Thanks,

Casper

[Iliana Dyankova]

Hi Casper,

I am not quite sure what causes this issue. Could you please provide a dojo example which I could debug on my side - this way I would be able to check what exactly is going wrong and provide concrete recommendations?

Regards,
Iliana Nikolova
Telerik

 

 

[Casper]

Hi Iliana,

Unfortunately I am at present unable to make a dojo for this, I have noticed though that while I can remove series from the options of the chart, the original series are still present in the _sourceSeries array. Which I assume is a private array not to be touched?

What can I do to effectuate the changes in the series array?

Thanks,

Casper

[Iliana Dyankova]

Hi Casper,

The provided configuration is not enough to determine the reason for the described issue. Is it possible to share the code where the stockChart series are removed?

Regards,
Iliana Nikolova
Telerik

 

 

[Casper]

Thanks Iliana,
This is how I remove the series:

function getConfiguration () {
            dataService.getGraphConfigurations(that.graphid).then(function (result) {
                var configurations = result.data;
                var chartOptions = that.chartobject.options;
         clearCollection(chartOptions.series);
                angular.forEach(configurations, function (config) {
                    chartOptions.series.push({
                        categoryField: "date",
                        name: config.name,
                        field: config.seriesKey,
                        type: "line",
                        markers: {
                            size: 2
                        },
                        tooltip: {
                            visible: true,
                            template: getTooltipTemplate(config.formatAs)
                        }
                    });
                });
                refreshData();
                that.chartobject.redraw();
            });
        }
  
  clearCollection(series){
   while(series.length > 0){
    series.pop();
   }
  }

[Iliana Dyankova]

Hi Casper,

I tested a similar approach - it is working as expected and I am not quite sure why the legend is not updated in your application. Could you please try removing the series via the chart setOptions method:

// get reference to the chart widget
var chart = $("#chart").data("kendoChart");
// clear the series
chart.setOptions({series: []});

If this suggestion does not help, I will need a runnable example which I could test on my side - this way I would be able to provide concrete recommendations and advise you further. Thank you in advance for your understanding and cooperation.

Regards,
Iliana Nikolova
Telerik