dataSource Array|Object|kendo.data.DataSource (default: [])

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.

Example - set dataSource as an Array

<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>

Example - set dataSource as a JavaScript object with data

<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>

Example - set dataSource as an existing kendo.data.DataSource instance

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",
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/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>