Chart

Description

The Chart widget can create bar, line, area, and scatter charts with a variety of options.

Official Kendo UI Chart documentation

Examples

  • Basic Example
  • Passing additional options
  • Using global options

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

Live Options

The kendoChart.md binding accepts all of the options that can be specified for the widget. However, when bound against an observable, these live options will update the widget or respond to updates from interactions with the widget.
data

An observableArray or kendo.data.dataSource to use in the chart

widget

If specified, will populate an observable with a reference to the actual widget

Future Plans

Possibly adding additional live options to observe other configuration choices and refresh the chart.