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

Legend not updating when dataseries are removed

5 Answers 68 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Casper
Top achievements
Rank 1
Casper asked on 19 Aug 2015, 10:51 AM

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

5 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 21 Aug 2015, 10:18 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Casper
Top achievements
Rank 1
answered on 03 Sep 2015, 10:44 AM

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

0
Iliana Nikolova
Telerik team
answered on 07 Sep 2015, 10:24 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Casper
Top achievements
Rank 1
answered on 07 Sep 2015, 01:04 PM

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

0
Accepted
Iliana Nikolova
Telerik team
answered on 09 Sep 2015, 12:40 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Casper
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Casper
Top achievements
Rank 1
Share this question
or