Data Source Controls

The Chart 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.

Meat/Poultry Sales
Meat/Poultry SalesMeat/Poultry Sales$32,639$7,234$17,347$20,589$80,476$4,587Alice MuttonMishi Kobe NikuPâté chinoisPerth PastiesThüringer RostbratwurstTourtière
<dx:BootstrapPieChart runat="server" DataSourceID="ChartDataSource" TitleSettings-Text="Meat/Poultry Sales">
    <SeriesCollection>
        <dx:BootstrapPieChartSeries ArgumentField="ProductName" ValueField="ProductSales">
            <Label Visible="true">
                <Format Type="Currency" />
            </Label>
        </dx:BootstrapPieChartSeries>
    </SeriesCollection>
</dx:BootstrapPieChart>
<ef:EntityDataSource runat="server" ID="ChartDataSource" ContextTypeName="DevExpress.Web.Demos.NorthwindContextSL" EntitySetName="SalesByCategory"
    Select="it.[ProductName], it.[ProductSales]" Where="it.[CategoryName] = 'Meat/Poultry'">
</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 Chart will do the rest. This URL may specify an absolute or relative path to the resource.

Daily Sales
Daily SalesDaily SalesSunday, 1Monday, 2Tuesday, 3Wednesday, 4Thursday, 5Friday, 6Saturday, 7Sunday, 8Monday, 9Tuesday, 10012345678910
<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/simple.json" TitleSettings-Text="Daily Sales" Rotated="true">
    <ArgumentAxis ArgumentType="System.DateTime" Type="Discrete"/>
    <SeriesCollection>
        <dx:BootstrapChartBarSeries ArgumentField="date" ValueField="sales" />
    </SeriesCollection>
    <SettingsLegend Visible="false" />
</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.

Olympic Medals in 2016
Olympic Medals in 2016Olympic Medals in 2016USABritainChinaRussiaGermanyJapan010203040506070809010011012013046272619171237231817108381726191521Gold MedalsSilver MedalsBronze Medals
<dx:BootstrapChart runat="server" DataSourceUrl="~/Charts/DataBinding.aspx?callback=?" TitleSettings-Text="Olympic Medals in 2016" Rotated="true" CustomPalette="#ffd700, #c0c0c0, #cd7f32">
    <SettingsCommonSeries ArgumentField="country">
        <Label Visible="true" />
    </SettingsCommonSeries>
    <SeriesCollection>
        <dx:BootstrapChartStackedBarSeries ValueField="gold" Name="Gold Medals" />
        <dx:BootstrapChartStackedBarSeries ValueField="silver" Name="Silver Medals" />
        <dx:BootstrapChartStackedBarSeries ValueField="bronze" Name="Bronze Medals" />
    </SeriesCollection>
    <SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
</dx:BootstrapChart>
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();
    }
}
Screen Size
Color Themes
Demo QR Code
Client-Side API