New to Kendo UI for jQuery? Start a free 30-day trial

DataSource

configuration

Specifies the data to be visualized in the ChartWizard component.

If the dataSource option is set to a JavaScript object or array, the widget will initialize a new kendo.data.DataSource instance by using the value as a data source configuration.

If the dataSource option is an existing kendo.data.DataSource instance the widget will use that instance and will not initialize a new one.

ChartWizard component needs a specific type of data(ChartWizardDataRow) to work as expected. This type of data, which is an array consists of single or multiple arrays of Objects, which have the field and value properties.

ChartWizard component accepts a Table-like data which is an Array consisting of Objects with dataItem and dataColumns fields.

dataSource

Array|Object|kendo.data.DataSource

Default: []

<div id="chartwizard"></div>
<script>
$("#chartwizard").kendoChartWizard({
           dataSource: [
                [
                    { field: 'Product Name', value: 'Calzone' },
                    { field: 'Quantity', value: 1 },
                    { field: 'Price', value: 12.39 },
                    { field: 'Tax', value: 2.48 },
                    { field: 'Total', value: 14.87 }
                ],
            ]
        });
</script>

<div id="chartwizard"></div>
<script>
$("#chartwizard").kendoChartWizard({
           dataSource: {
            data: [
                    [
                        { field: 'Product Name', value: 'Calzone' },
                        { field: 'Quantity', value: 1 },
                        { field: 'Price', value: 12.39 },
                        { field: 'Tax', value: 2.48 },
                        { field: 'Total', value: 14.87 }
                    ],
                ]
            }
        });
</script>

To bind the chartWizard component to a remote dataSource which returns only the dataItems, you should set the dataColumns field.

<div id="chartwizard"></div>
<script>
var dataSource = new kendo.data.DataSource({
                type: "odata-v4",
                transport: {
                    read: "https://demos.telerik.com/service/v2/odata/Orders"
                },
                schema: {
                    model: {
                        fields: {
                            OrderID: { type: "number" },
                            Freight: { type: "number" },
                            ShipName: { type: "string" },
                            OrderDate: { type: "date" },
                            ShipCity: { type: "string" }
                        }
                    }
                },
                pageSize: 20,
                serverPaging: true,
                serverFiltering: true,
                serverSorting: true
            });

$("#chartwizard").kendoChartWizard({
           dataSource: dataSource,
           dataColumns: [
                {
                    field: "OrderID",
                },
                {
                    field: "Freight",
                },
                {
                    field: "ShipName",
                    title: "Ship Name"
                }, {
                    field: "ShipCity",
                    title: "Ship City"
                }
            ],
        });
</script>