This example demonstrates generating a basic area chart.

<div data-bind="kendoChart: { data: items, series: [{ name: 'sample', field: 'value' }] }"> </div>

var ViewModel = function() {
    this.items = [
        { name: "one", value: 10 },
        { name: "two", value: 20},
        { name: "three", value: 30 }
    ];
};

                            ko.applyBindings(new ViewModel());

This example demonstrates generating a bar chart with some additional options specified.

<input data-bind="value: newValue" class="span1" />
<input data-bind="value: newValueB" class="span1" />
<button data-bind="click: addItem">Add data</button>
<hr />
<div data-bind="kendoChart: { data: items, title: { text: 'Graph Sample' }, series: seriesConfig, seriesColors: ['blue', 'red'] }"> </div>

var ViewModel = function() {
    this.items = ko.observableArray([
        { name: "one", value: 10, valueB: 5 },
        { name: "two", value: 20, valueB: 8 },
        { name: "three", value: 30, valueB: 14 }
    ]);

    this.seriesConfig = [
        { name: 'sample A', field: 'value' },
        { name: 'sample B', field: 'valueB' }
    ]

    this.newValue = ko.observable(40);
    this.newValueB = ko.observable(10);

    this.addItem = function() {
        this.items.push({ name: "new", value: this.newValue(), valueB: this.newValueB() });
    };
};

                            ko.applyBindings(new ViewModel());

This example demonstrates generating a line chart and customizing the series colors by setting the seriesColor property in ko.bindingHandlers.kendoChart.options.

<input data-bind="value: newValue" class="span1" />
<input data-bind="value: newValueB" class="span1" />
<button data-bind="click: addItem">Add data</button>
<hr />
<div data-bind="kendoChart: { data: items, series: seriesConfig }"> </div>

var ViewModel = function() {
    this.items = ko.observableArray([
        { name: "one", value: 10, valueB: 5 },
        { name: "two", value: 20, valueB: 8 },
        { name: "three", value: 30, valueB: 14 }
    ]);

    this.seriesConfig = [
        { name: 'sample A', field: 'value', type: 'line' },
        { name: 'sample B', field: 'valueB', type: 'line' }
    ]

    this.newValue = ko.observable(40);
    this.newValueB = ko.observable(10);

    this.addItem = function() {
        this.items.push({ name: "new", value: this.newValue(), valueB: this.newValueB() });
    };
};

ko.bindingHandlers.kendoChart.options = {
    seriesColors: ["blue", "red"],
    plotArea: { background: '#ccc' },
    title: { text: 'Graph Sample' }
};

                            ko.applyBindings(new ViewModel());