Skip to content
This repository was archived by the owner on Jul 1, 2025. It is now read-only.
This repository was archived by the owner on Jul 1, 2025. It is now read-only.

Chart does not redraw after adding a new series #255

Description

@hnabih

First, thank you for developing this library, very useful.
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();
      } 

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions