Binding igSparkline to Data

Topic Overview

Purpose

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.

Concepts

Data Binding
JSON
Web Services
WCF Services
ASP.NET MVC

Topics

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 for jQuery™ 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

https://github.com/IgniteUI/help-samples/tree/master/24.1/EN/sparkline/bind-to-remote-data

Ignite UI | Help Topics