Binding igSparkline to Data

Topic Overview


This topic explains how to bind the igSparkline ™ control to various data sources (JavaScript array, IQueryable<T>, web service).

Required background

The following table lists the prerequisite materials required to understanding this topic.


  • Data Binding
  • JSON
  • Web Services
  • WCF Services


  • igDataSource Overview: General description of the igDataSource control which serves as an intermediate layer between the data bound controls and the actual data source.

  • igSparkline Overview: This topic provides conceptual information about the igSparkline control including its main features.

Binding to Data Sources

Supported data sources

The igDataChart control supports the following data sources:

Data Source Binding
igDataSource Used internally by the control to manage data operations
IEnumerable<T> Used to supply data from an MVC controller method

Requirements for binding

Requirements for binding to the igDataSource control vary from data source to data source. The following table lists each requirement category.

Requirement category Requirement listing
Data structure
  • JSON (client side or from a web or WCF service)
  • XML (client side or from a web or WCF service)
  • JavaScript array
  • IEnumerable in ASP.NET MVC
Data types
  • String (for category axes)
  • Number
  • Date

Data sources summary

The igSparkline control’s data binding is identical to that of the other controls in the Ignite UI™ library. The way to bind data is either by assigning a data source to the dataSource option or by providing a URL in the dataSourceUrl in the event that data is provided by a web or WCF service.

Data structure Related Topic/Sample
Data binding to a JavaScript Array Related Topic
Adding igSparkline to an HTML Document
Data binding to an IEnumerable Related Topic
Adding igSparkline to an ASP.NET MVC View
Data binding to remote Data Refer to the sample below

Bind to Remote Data

Related Content


The following topic provides additional information related to this topic.


The following samples provide additional information related to this topic.

  • Bind to JSON Data: This sample shows a basic implementation of the igSparkline bound to a JavaScript array.

View on GitHub