Telerik UI for Windows 8 HTML

RadSparkline can be bound to both local and remote sources of data. For reading data from a web service or a file, the control uses the built-in Telerik.Data.DataSource component API.

Binding to Local Data

RadSparkline allows for a very simple set-up, when using local data. You just need to set an array of values to the data property and, if you want to change the RadSparkline type, set the type property to the name of your choice.

HTML Copy imageCopy
Population growth:
<span id="localBoundSparkline" data-win-control="Telerik.UI.RadSparkline" data-win-options="{
    type: 'column',
    data: [200, 450, 300, 125]
}"></span>
sparkline-databinding-local

You can also define the RadSparkline as a series with type and data options defined and get the same result.

HTML Copy imageCopy
Population growth:
<span id="localBoundSparklineWithSeries" data-win-control="Telerik.UI.RadSparkline" data-win-options="{
    series: [{
        type: 'column',
        data: [200, 450, 300, 125]
    }]
}"></span>

Binding to Remote Data

To bind RadSparkline to remote data, you can use the underlying Telerik.Data.DataSource component. The set-up of the data read would be the same as with any other control binding. For further information on the API exposed by the DataSource component, click here: Configuring Remote Binding.

The following example shows how you can define RadSparkline when binding to a remote web service:

HTML Copy imageCopy
Products price comparison:
<span id="remoteBoundSparkline" data-win-control="Telerik.UI.RadSparkline" data-win-options="{
            dataSource: {
            pageSize: 10,
                transport: {
                    read: {
                        url: 'http://services.odata.org/Northwind/Northwind.svc/Products',
                        dataType: 'json'
                    }
                },
                schema: {
                    data: 'value'
                }
            },
            series: [{
                type: 'column',
                field: 'UnitPrice'
            }],
            categoryAxis: {
                field: 'ProductName'
            }
        }"></span>
sparkline-databinding-remote