JSON

Data can be provided to the Bootstrap Sparkline control in several different ways. One of them is to specify the DataSourceUrl property. The value of the property can be a path to a JSON file containing the data.
ASPXCopy 
<dx:BootstrapSparkline runat="server" ArgumentField="date" ValueField="sales" DataSourceUrl="~/jsondata/simple.json">
</dx:BootstrapSparkline>

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.

ASPXDataBindingJSONP.aspx.csCopy 
<dx:BootstrapSparkline runat="server" ArgumentField="country" ValueField="gold" DataSourceUrl="~/Sparkline/DataBindingJSONP.aspx?callBack=?">
</dx:BootstrapSparkline>
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
public partial class Sparkline_DataBindingJSONP: System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e) {
        ProcessChartRequest();
    }
    private void ProcessChartRequest() {
        string callBackSignature = Request.QueryString["callBack"];
        if(!string.IsNullOrEmpty(callBackSignature)) {
            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();
        }
    }
}

Data Source Controls

The third way to provide the Sparkline control with data is to use one of ASP.NET data source controls (such as EntityDataSource) on the server side. To associate a sparkline with a data source control, use the DataSourceId property. This is the easiest way to provide large amounts of data from the database to the control, and the right choice if you do not need to get data from third-party sources.
ASPXCopy 
<dx:BootstrapSparkline runat="server" ArgumentField="ProductName" ValueField="ProductSales" DataSourceID="SparklineDataSource">
</dx:BootstrapSparkline>
<ef:EntityDataSource runat="server" ID="SparklineDataSource" ContextTypeName="DevExpress.Web.Demos.NorthwindContextSL" EntitySetName="SalesByCategory"
    Select="it.[ProductName], it.[ProductSales]" Where="it.[CategoryName] = 'Meat/Poultry'">
</ef:EntityDataSource>

Data Objects

The last option is to bind to a server-side data collection such as List, Array or DataTable. In this case, use the DataSource property to specify a data source. This is the right choice if you are obtaining or generating data in code.
ASPXDataBinding.aspx.csCopy 
<dx:BootstrapSparkline runat="server" ArgumentField="Argument" ValueField="Value">
</dx:BootstrapSparkline>
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class Sparkline_DataBinding : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        BindToObjectSparkline.DataSource = GetDataTable();
    }
    private DataTable GetDataTable() {
        DataTable dataTable = new DataTable();
        dataTable.Columns.Add("Argument", typeof(string));
        dataTable.Columns.Add("Value", typeof(int));
        dataTable.Rows.Add(new object[] { "1", 3 });
        dataTable.Rows.Add(new object[] { "2", 2 });
        dataTable.Rows.Add(new object[] { "3", 5 });
        dataTable.Rows.Add(new object[] { "4", 9 });
        dataTable.Rows.Add(new object[] { "5", 1 });
        return dataTable;
    }
}
Screen Size
Color Themes
Demo QR Code