Skip to content

Latest commit

 

History

History
57 lines (40 loc) · 2.31 KB

data-binding.md

File metadata and controls

57 lines (40 loc) · 2.31 KB
title page_title description slug canonicalLink position
Data Binding
Data Binding - Chart - Kendo UI for Vue
Bind the Kendo UI Chart wrapper for Vue to local data arrays, remote data services, or grouped data.
databinding_chart_charts_wrapper
2

Data Binding

The Chart populates its data through binding to local, remote, and grouped data.

Binding to Local Data Arrays

The Chart provides built-in data binding capabilities for displaying data from a local data storage through the data-source property of the Chart.

{% meta height:460 %} {% embed_file chart/data-binding/local/main.vue preview %} {% embed_file chart/data-binding/local/main.js %} {% endmeta %}

Binding to Remote Data Services

To initialize and populate the Chart with data by binding it to a remote data service:

  1. Specify a remote endpoint or web service (REST) which returns data in a JSON/JSONP format.
  2. Utilize the Kendo UI Data Source component between the Chart and the underlying data.

To make the connection to the remote endpoint and process the data properly, the DataSource requires the following information:

  • URLs of the web service.
  • Request type.
  • Response data type.
  • Structure (schema) of the response (if more complex than a plain array of objects).

{% meta height:460 %} {% embed_file chart/data-binding/remote/main.vue preview %} {% embed_file chart/data-binding/remote/main.js %} {% endmeta %}

Binding to Grouped Data

You can also bind the Chart to grouped data by using the Kendo UI Data Source as a mediator.

{% meta height:460 %} {% embed_file chart/data-binding/grouped-data/main.vue preview %} {% embed_file chart/data-binding/grouped-data/main.js %} {% endmeta %}

Suggested Links