Data Binding
The Kendo UI for Vue Native Chart supports the binding of its data series and category axis to arrays and Datasets of objects.
Binding Series
This section provides information on the binding methods for the Chart series.
Arrays of Values
The simplest form of data binding involves the supplying of each series with an array of values.
Chart Data:
seriesData: [1, 2, 3, 5],
Series binding:
<ChartSeriesItem :data-items="seriesData" />
Arrays of Arrays
Some series require more than one value per point—for example, the Scatter (x and y) and Bubble (x, y, and size) series.
Chart Data:
seriesData: [
[1, 1, 10],
[2, 2, 20],
[3, 3, 30],
]
Series binding:
<ChartSeriesItem :data-items="seriesData" :type="'bubble'" />
The following example demonstrates how to bind a Bubble series to an array of arrays.
Objects
The Chart allows you to bind it to objects by specifying the fields you want to use—for the value, category, X value, Y value, and so on. This is the most commonly used type of binding as it allows you to use your model with minimal or no modification.
Chart Data:
seriesData: [
{
product: "Chai",
sales: 200,
},
{
product: "Others",
sales: 250,
},
]
Series binding:
<ChartSeriesItem
:data-items="seriesData"
:type="'column'"
:field="'sales'"
:category-field="'product'"
/>
The following example demonstrates how to configure a Column series with bound category text and a value.
Groups of Objects
Plotting a separate series for each unique category in a data set is often convenient. For example, a Line Chart for each product in a sales report. Usually, the exact number of categories is not known in advance.
The Data Query package offers a convenient groupBy
method that you can use to split the records into groups. It takes the data and a GroupDescriptor
. The output is a GroupResult
that contains the groups and their items.
Chart Data:
data: [
{
interval: 1,
service: "Service 1",
value: 5,
},
{
interval: 2,
service: "Service 1",
value: 15,
},
{
interval: 3,
service: "Service 1",
value: 10,
},
{
interval: 1,
service: "Service 2",
value: 10,
},
{
interval: 2,
service: "Service 2",
value: 5,
},
{
interval: 3,
service: "Service 2",
value: 15,
},
]
Series binding:
<ChartSeriesItem
v-for="(item, index) in series"
:key="index"
:data-items="item.items"
:name="item.value"
:field="'value'"
:category-field="'interval'"
:type="'line'"
/>
The following example demonstrates how to plot a Line Chart for each service.
Binding Categories
The category axis of Categorical Charts is a data-bound component like the series.
It supports the following basic approaches for providing the category list:
When you bind the Chart to dates, the category axis provides dedicated functions. For more information, refer to the section on displaying time series.
Arrays of Labels
The simplest form of data binding involves the supplying of an array of labels for the categories to the axis. The list will be displayed as is, without any modifications. Series data points are positioned in sequence along the axis.
- The order of the categories has no relation to the order of the series data points.
- The number of the categories has to be equal to the number of the data points in the series.
- To preserve the order, the missing values in the series have to be represented by
null
.
Chart Data:
seriesData: [20, 40, 45, 30, 50],
categories: ["Mon", "Tue", "Wed", "Thu", "Fri"],
Series binding:
<ChartCategoryAxis>
<ChartCategoryAxisItem :categories="categories" />
</ChartCategoryAxis>
<ChartSeries>
<ChartSeriesItem :data-items="seriesData" />
</ChartSeries>
Category Fields
The previous approach is error-prone because of the necessity for you to maintain a category and a particular data order. To avoid this requirement, bind the categories to the same model object as the series. In this way, the series points and categories will always be matched automatically.
Chart Data:
seriesData: [
{
product: "Chai",
sales: 200,
},
{
product: "Others",
sales: 250,
},
]
Series binding:
<ChartSeriesItem
:data-items="seriesData"
:type="'column'"
:field="'sales'"
:category-field="'product'"
/>
Handling Duplicate Categories
Binding to a category field makes it possible for two data points to have the same category—the following example demonstrates two values that are declared for 'Chai'
.
Chart Data:
seriesData: [
{
product: "Chai",
sales: 200,
},
{
product: "Chai",
sales: 100,
},
{
product: "Others",
sales: 250,
},
]
Series binding:
<ChartSeriesItem
:data-items="seriesData"
:type="'column'"
:field="'sales'"
:category-field="'product'"
/>
In this case, the Chart takes the data points from the source data set and produces a new point by using an aggregate function.
By default, the aggregate
function returns the maximum value of the value fields. If the category contains only one point, it returns it without modification. Other aggregates, such as count and sum, produce their own value even if the category contains only one data point.
Chart Data:
seriesData: [
{
product: "Chai",
sales: 200,
},
{
product: "Chai",
sales: 100,
},
{
product: "Others",
sales: 250,
},
]
Series binding:
<ChartSeriesItem
:data-items="seriesData"
:type="'column'"
:field="'sales'"
:aggregate="'count'"
:category-field="'product'"
/>
You can also define your own aggregate functions, as demonstrated in the following example
When the category binding is in use, the aggregate function is executed for all unique categories.
Chart Data:
seriesData: [
{
product: "Chai",
sales: 200,
},
{
product: "Chai",
sales: 100,
},
{
product: "Others",
sales: 250,
},
]
Series binding:
<ChartSeriesItem
:data-items="seriesData"
:type="'column'"
:field="'sales'"
:aggregate="customAggregate"
:category-field="'product'"
/>
Custom aggregate definition:
customAggregate(values, series, dataItems, category) {
return values.reduce((n, acc) => acc + n, 0);
}
No Data Overlay
Use the ChartNoDataOverlay component when no series data is available. The Chart will display a No Data overlay with a message "No data available.". The message can be localized and is part of the Charts Globalization - Messages.
For further customization, add the custom content as children
of the ChartNoDataOverlay component.