Data Source Controls
The Range Selector control can obtain data from one of ASP.NET data source controls (such as EntityDataSource) on the server side. It is the easiest way to provide large amounts of data from the database to the control, and it is the right choice if you do not need to get data from third-party sources.
For data binding, assign the data source control ID to the DataSourceID property. You can also specify the DataSource property from code behind and call the DataBind method.
<dx:BootstrapRangeSelector runat="server" DataSourceID="EFDataSource" TitleSettings-Text="Meat/Poultry Sales">
<Chart>
<SeriesCollection>
<dx:BootstrapChartBarSeries ArgumentField="ProductName" ValueField="ProductSales">
<Label Visible="true" RectCssClass="discrete-label">
<Format Type="Currency" />
</Label>
</dx:BootstrapChartBarSeries>
</SeriesCollection>
</Chart>
</dx:BootstrapRangeSelector>
<ef:EntityDataSource runat="server" ID="EFDataSource" ContextTypeName="DevExpress.Web.Demos.NorthwindContextSL" EntitySetName="SalesByCategory"
Select="it.[ProductName], it.[ProductSales]" Where="it.[CategoryName] = 'Meat/Poultry'" OrderBy="it.[ProductSales] ASC">
</ef:EntityDataSource>
JSON Files
If your server stores data in JSON, performing AJAX requests is inevitable. But instead of configuring these requests manually, assign the URL of your data storage (in this demo, a JSON file) to the DataSourceUrl property, and the Range Selector will do the rest. This URL may specify an absolute or relative path to the resource.
<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/jsondata/simple.json" TitleSettings-Text="Daily Sales">
<SettingsScale Type="Semidiscrete" ValueType="System.DateTime" RangeIntervalUnit="Day" MinRange="1" />
<Chart>
<SeriesCollection>
<dx:BootstrapChartBarSeries ArgumentField="date" ValueField="sales" />
</SeriesCollection>
</Chart>
</dx:BootstrapRangeSelector>
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.
<dx:BootstrapRangeSelector runat="server" DataSourceUrl="~/RangeSelector/DataBinding.aspx?callback=?" TitleSettings-Text="Olympic Medals in 2016">
<Chart>
<SettingsCommonSeries ArgumentField="country">
<Label Visible="true" />
</SettingsCommonSeries>
<SeriesCollection>
<dx:BootstrapChartStackedBarSeries ValueField="gold" CssClass="gold-bar">
<Label RectCssClass="gold-bar" />
</dx:BootstrapChartStackedBarSeries>
<dx:BootstrapChartStackedBarSeries ValueField="silver" CssClass="silver-bar">
<Label RectCssClass="silver-bar" />
</dx:BootstrapChartStackedBarSeries>
<dx:BootstrapChartStackedBarSeries ValueField="bronze" CssClass="bronze-bar">
<Label RectCssClass="bronze-bar" />
</dx:BootstrapChartStackedBarSeries>
</SeriesCollection>
</Chart>
</dx:BootstrapRangeSelector>
protected void Page_Load(object sender, EventArgs e) {
if(Request.QueryString["callback"] != null) {
string callBackSignature = Request.QueryString["callBack"];
string filePath = Server.MapPath(@"~\jsondata\medals.json");
string jsFunction = string.Format("{0}({1});", callBackSignature, File.ReadAllText(filePath));
Response.ContentType = "text/javascript; charset=utf-8";
Response.Write(jsFunction);
Response.End();
}
}