kendoChart

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout-kendo/0.9.7/knockout-kendo.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-debug.js"></script>
<div data-bind="kendoChart: { series:series }"></div>

<hr/>

<input data-bind="value: newName" />
<input data-bind="value: newA" />
<input data-bind="value: newB" />

<button data-bind="click: addData">Add Data</button>

CSS

input { width: 50px; }

JavaScript

var ViewModel = function() {
    this.title = "my chart";
    this.mydata = ko.observableArray([
        { name: "one", valueA: 10, valueB: 12 },
        { name: "two", valueA: 20, valueB: 13 },
        { name: "three", valueA: 30, valueB: 14 },
        { name: "four", valueA: 40, valueB: 15 }
    ]);
    
    this.series = [{
                    type: "column",
                                        data: [{day:"Fri", value: 20, valueColor: "red" },
                {day: "Mon", value: 40, valueColor: "green" },
                {day: "Tue", value: 45, valueColor: "orange" },
                {day: "Wed",value: 30, valueColor: "yellow" },
                {day: "Thur",value: 55, valueColor: "pink" }],
                    stack: true,
                    name: "on battery",
                    color: "#cc6e38"
    }];
    this.newName = ko.observable("new");
    this.newA = ko.observable(10);
    this.newB = ko.observable(15);
    
    this.addData = function() {
        this.mydata.push({ name: this.newName(), valueA: this.newA(), valueB: this.newB() });
    }
};

ko.applyBindings(new ViewModel());