Knockout-Kendo Chart - remove and add series

Question

My project is MVC 5, I am using the following to generate a chart with multiple series:

HTML:

<button data-bind="click: addItem">Add</button>
<button data-bind="click: removeItem">Remove</button>
 <div data-bind="kendoChart2: { title: { text: 'Graph Sample' }, 
series: seriesConfig,tooltip: {visible: true,template: '#= series.name #: #= value #'} , seriesDefaults: {
                        type: 'line',style: 'smooth'}}"> </div>

Javascript

 var MainViewModel = function () {
        var self = this;
        this.Systolic = ko.observableArray([]);
        this.Diastolic = ko.observableArray([]);
        this.HeartRate= ko.observableArray([]);
        $.ajax({
            type: "GET",
            url: '/Charts/GetChart',
            contentType: "application/json; charset=utf-8",
            async: false,
            cache: false,
            dataType: "json",
            success: function (result) {
                //Diastolic
                if (result && result.Systolic.length > 0) {
                    for (var i = 0; i < result.Systolic.length; i++) {
                        self.Systolic.push(result.Systolic[i].Systolic);
                    }
                };
               ....
            },
            error: function (err) {
                    alert(err.status + " : " + err.statusText);
             }});

    this.seriesConfig = ko.observableArray([
                {name: "Systolic", data: this.Systolic()},
                {name: "Diastolic",data: this.Diastolic()}]);
    this.addItem = function() {
    this.seriesConfig.push({ name: "Heart Rate", data: this.HeartRate() });
                };
     this.removeItem = function() {
     this.seriesConfig.remove({ name: "Diastolic", data: this.Diastolic() });
        };
        }.bind(this);
      ko.kendo.bindingFactory.createBinding(
{
    name: "kendoChart",
    bindingName: "kendoChart2",
    watch: {
      data: function(value) {
          ko.kendo.setDataSource(this, value);
      },
      series: function(value) {
           this._sourceSeries = value;
           this.refresh();
           this.redraw();}            
    }
});
        window.viewModel = new MainViewModel();
        ko.applyBindings(window.viewModel);

The chart works great, however can't add or remove series?

Note: the addItem works, I get the value of the new series:

series: function (value) {
        alert(value[2].name);
        this.seriesConfig = value;
        this.refresh();
        this.redraw();
      }

I also tried load all series then use the following hide a series:

$("#kendoChart").getKendoChart().options.series[1].visible = false;
$("#kendoChart").getKendoChart().redraw();

Does not work, I think the chart name does not register.

isp-zax · Answer 1 · 2018-08-29T06:08:54.933

I am not familiar with knockout-kendo, just with knockout in general, so if fixing obvious problem as described below will not work, you might need to refresh bindings. Looking at this example however this is not needed, so most likely you got caught by a simple fact that array's remove performs simple == comparison and it fails to find equal object in the array.

Here is a simplified example (although you might know it already, but just in case):

var a="abc";
var b="abc";
var aa = [1,2,3,"a","b","c"];
var data1 = {name: a, data: aa};
var data2 = {name: b, data: aa};

now, comparison a==b returns true and clearly data slots are the same, however data1==data2 is false. That is because it's a different object.

So in your example in removeItem you create and pass a new object to remove, not the one in the array, so == comparison fails and nothing is removed as that newly created object isn't in your observable array.

I suggest comparing the name only similar to item.age < 18 comparison from knockout.js documentation on observable arrays:

this.seriesConfig.remove( function (item) { return item.name == "Diastolic"; } )

I believe, this should do the trick.

Knockout-Kendo Chart - remove and add series

1 Answers1