Binding to Data

• Jul 13, 2021
• 2 minutes to read

This document provides information on data binding approaches supported by chart controls included into the DevExpress Bootstrap Charts suite.

The following approaches are supported:

• Data Source Controls
• JSON Files
• JSONP

Data Source Controls

The chart controls can obtain data from one of the ASP.NET data source controls (such as EntityDataSource) on the server side. Use this to provide large amounts of data from the database to the widget, and if you do not need to get data from third-party sources. To assign a data source to a chart, set the chart’s BootstrapWebClientUIWidget.DataSourceID property.

ASPX

<dx:BootstrapPieChart runat="server" DataSourceID="DataSource1" TitleText="Meat/Poultry Sales">
    <SeriesCollection>
        <dx:BootstrapPieChartSeries ArgumentField="ProductName" ValueField="ProductSales">
        </dx:BootstrapPieChartSeries>
    </SeriesCollection>
</dx:BootstrapPieChart>

<ef:EntityDataSource runat="server" ID="DataSource1" ContextTypeName="MyWebApplication.NorthwindContext" EntitySetName="SalesByCategory"
    Select="it.[ProductName], it.[ProductSales]" Where="it.[CategoryName] = 'Meat/Poultry'">
</ef:EntityDataSource>

For testing purposes, you can use demo databases supplied with DevExpress Bootstrap components. The databases are installed in the following folder, by default:

C:\Users\Public\Documents\DevExpress Demos 24.2\Components\ASP.NET\CS\BootstrapDemos\App_Data\

JSON Files

Performing AJAX requests is inevitable if your server stores data in JSON. However, instead of configuring these requests manually, you can assign the URL of your data storage to the BootstrapWebClientUIWidget.DataSourceUrl property and the chart control automatically performs the requests required to obtain data from the storage. The URL can specify an absolute or relative path to the resource.

ASPX

<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/data.json" ...>
    ...
</dx:BootstrapChart>

JSONP

You can use a JSONP callback parameter supported by jQuery.ajax() to access a web service that implements a JSONP (JSON with padding) endpoint.

ASPX

<dx:BootstrapChart runat="server" DataSourceUrl="~/Charts/DataBinding.aspx?callback=?" ...>
    ...
</dx:BootstrapChart>