Wijmo UI for the Web
Data Binding
Show AllShow All
Hide AllHide All

The LineChart widget offers options that provide data binding support for anything from a simple line chart to a complex grouped line chart.

The following examples show you how to bind a single series chart to an array, how to bind a multiple series chart to different data members, and bind a multiple series chart to a shared x member and multiple y members.

Single-Series Chart Bound to an Array

For single series charts, create an array, set the dataSource option to the array, and in the seriesList option, bind the x and y data to a member in your array.

Script to bind a single series to a data source

This code yields a line chart like that in the image below.

Multi-Series Chart with Different Data Members

For charts with multiple series, if you use a single data array, you can set the dataSource option on the chart to apply to all of the series. However, if you want to use a different array for each series, you can define the dataSource option for each series in the seriesList with script like the following.

Script to bind mutiple series to different data sources

This code yields a line chart like that in the image below.

Multi-Series Chart with a Shared X Member and Different Y Members

For multiple series charts that have a common x member and different y members, set the dataSource for the chart, then bind x on the chart's data option, and bind the y values in each series in the seriesList.

Script to bind to a shared data source

This code yields a line chart like that in the image below.

See Also

Reference

How To

 
Support Options