We're sorry but this site requires JavaScript.

Version

Is this content useful?

Thank you for your feedback!

Thank you for your feedback! You have rated this topic in the last 30 days.

Adding igSparkline to an HTML Document

Topic Overview

Purpose

This topic explains how to add the igSparkline™ to an HTML page and bind to a JavaScript array.

Required background

The following table lists the concepts, topics, and articles required as a prerequisite to understanding this topic.

jQuery Selectors

Topics

igSparkline Overview: This topic provides an overview of the igSparkline control, its benefits, and the supported chart types.
Adding igSparkline Overview: This topic provides an overview of the various ways of adding igSparkline™ to an application.
Adding Required Resources Manually: This topic explains the organization of JavaScript resources in Ignite UI for jQuery®.
Using JavaScript Resources in Ignite UI for jQuery: This topic provides general guidance on adding required JavaScript resources to use controls from the Ignite UI for jQuery library.

External Resources

jQuery UI Widget Factory

In this topic

This topic contains the following sections:

Adding igSparkline to an HTML Document – Conceptual Overview

Adding igSparkline summary

The igSparkline is a data-bound control requiring a set of data objects to render. The control requires an HTML element, a DIV, to serve as the base for instantiation.

The data source is specific through the dataSource option. This example defines the data in-line with the HTML. The array is obtainable through an AJAX call, an external JavaScript file, or any other means of retrieving JavaScript array data.

The igSparkline is configured in a function for document ready which fires once the document has finished loading resources.

Requirements

The following table summarizes the requirements for using the igSparkline control.

Requirement/Required Resources Description What you need to do…

IG Theme This theme contains the visual styles for the Ignite UI for jQuery library. The theme file is: css/themes/Infragistics/infragistics.theme.css

igSparkline CSS resource files

The styles from the following CSS file are used for rendering various elements of the control:

CSS Resource	Description
`css/structure/modules/infragistics.ui.shared.css`	Shared CSS styles for all Ignite UI for jQuery controls.
`css/structure/modules/infragistics.ui.html5.css`	CSS related to browser support for HTML5
`css/structure/modules/infragistics.ui.sparkline.css`	CSS styles specific to the `igSparkline` widget

Add style reference to the file in your page.

Modernizr library (Optional)

The Modernizr library is used by the igSparkline to detect browser and device capabilities. It is not mandatory and, if not included, the control will behave as if in a normal desktop environment with an HTML5 compatible browser.

Modernizr

Add a script reference to the library in the <head> section of your page.

jQuery and jQuery UI JavaScript resources

Ignite UI for jQuery is built on top of the following frameworks:

Add script references to both libraries in the <head> section of your page.

General igSparkline JavaScript Resources

The igSparkline functionality of the Ignite UI for jQuery library is distributed across several files. You can load the required resources in one of the following ways:

Use the Infragistics.core.js and Infragistics.dv.js combined files to quickly reference the required JavaScript dependencies
Use the Infragistics® Loader (igLoader™). You only need to include a script reference to igLoader on your page and specify the igSparkline as a parameter and the igLoader loads the required individual JavaScript files and CSS files.
Load the required resources manually. You need to use the dependencies listed in the table below.

The following table lists the Ignite UI for jQuery library dependences related to the igSparkline control. These resources need to be referred to explicitly if you chose to load resources manually (i.e. not to use igLoader).

JS Resource	Description
`js/modules/infragistics.util.js` `js/modules/infragistics.util.jquery.js`	Ignite UI for jQuery utilities
`js/modules/infragistics.ui.widget.js`	Common widget
`js/modules/Infragistics.datasource.js`	Data source framework
`js/modules/infragistics.templating.js`	`igTemplating` engine
`js/modules/infragistics.ext_core.js` `js/modules/infragistics.ext_collections.js` `js/modules/infragistics.ext_ui.js` `js/modules/infragistics.dv_jquerydom.js` `js/modules/infragistics.dv_core.js` `js/modules/infragistics.dv_geometry.js`	A shared library for all data visualization components
`js/modules/infragistics.dv_interactivity.js`	Optional. Required for user interaction such as tooltips.
`js/modules/infragistics.ui.basechart.js`	The base widget for all Ignite UI for jQuery chart components
`js/modules/infragistics.sparkline.js`	The internal core logic of the `igSparkline` widget
`js/modules/infragistics.ui.sparkline.js`	The `igSparkline` widget

Add one of the following:

A reference to igLoader
A reference to all the required JavaScript files (listed in the table on the left).

Steps

Following are the general conceptual steps for adding an igSparkline to an HTML document.

Reference the required JavaScript and CSS files.
Create a target element for the igSparkline.
Define the JavaScript array.
Instantiate the igSparkline in document ready.
Configure basic rendering options.

Adding igSparkline to an HTML Page

Introduction

This procedure adds a basic igSparkline to an HTML page and configures basic options to supply data and configure height and width. The igSparkline shows the total amount each order placed over a period of time.

The data structure contains an ExtendedPrice field containing the amount of the order and an OrderDate field containing the date of the order purchase. The valueMemberPath of the igSparkline is set to the ExtendedPrice and the labelMemberPath is set to the OrderDate.

Preview

The following screenshot is a preview of the result.

Prerequisites

A blank HTML document.

Overview

Reference the required JavaScript and CSS files.
Create a target element for the igSparkline.
Define the JavaScript array.
Instantiate the igSparkline in document ready.
Configure basic rendering options.

Steps

Follow these steps to add an igSparkline to an HTML document.

Referencing the required JavaScript and CSS files.

Setup the HTML document with the JavaScript and CSS file dependencies.

In HTML:

```html
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="../../igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <script src="../../js/modernizr.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery-ui.min.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="../../igniteui/js/infragistics.core.js"></script>
    <script src="../../igniteui/js/infragistics.dv.js"></script>
</head>
<body>
</body>
</html>
```

Creating a target element for the igSparkline.

Create a DIV element within the HTML body on which to instantiate the igSparkline widget.

In HTML:
```
 <body>
     
     <div id="sparkline"></div>
 …
```

Defining the JavaScript array.

Define the JavaScript array.

In HTML:

 <body>
 <script>
 var invoices = [
     {"OrderDate": "/Date(836452800000)/", "ExtendedPrice": 168.0000},
     { "OrderDate": "/Date(836452800000)/", "ExtendedPrice": 98.0000},
     { "OrderDate": "/Date(836452800000)/", "ExtendedPrice": 174.0000},
     { "OrderDate": "/Date(836539200000)/", "ExtendedPrice": 167.4000},
     { "OrderDate": "/Date(836539200000)/", "ExtendedPrice": 1696.0000},
     { "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 77.0000},
     { "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 1261.4000},
     { "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 214.2000},
     { "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 95.7600},
     { "OrderDate": "/Date(836798400000)/","ExtendedPrice": 222.3000}
 ];
 </script>
 </body>

Instantiate the igSparkline in document ready.

Use the selector of the target element defined previously to instantiate the widget.

In HTML:
```
 <script>
         $(function () {
             $("#sparkline").igSparkline({
             });
         });
 </script>
```

Configuring basic rendering options.

When instantiating the igSparkline, configure the dataSource, valueMemberPath, labelMemberPath, height, and width options.

In HTML:

 $("#sparkline").igSparkline({
     dataSource: invoices,
     height: "100px",
     width: "300px",
     valueMemberPath: 'ExtendedPrice',
     labelMemberPath: 'OrderDate'
 });

Full Code:

In HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <!-- Ignite UI for jQuery Required Combined CSS Files -->
    <link href="../../igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="../../igniteui/css/structure/infragistics.css" rel="stylesheet" />
    <script src="../../js/modernizr.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jquery-ui.min.js"></script>
    <!-- Ignite UI for jQuery Required Combined JavaScript Files -->
    <script src="../../igniteui/js/infragistics.core.js"></script>
    <script src="../../igniteui/js/infragistics.dv.js"></script>
</head>
<body>
    <!-- Target element for the igSparkline -->
    <div id="sparkline"></div>
    <script>
        var invoices = [
            {"OrderDate": "/Date(836452800000)/", "ExtendedPrice": 168.0000},
            { "OrderDate": "/Date(836452800000)/", "ExtendedPrice": 98.0000},
            { "OrderDate": "/Date(836452800000)/", "ExtendedPrice": 174.0000},
            { "OrderDate": "/Date(836539200000)/", "ExtendedPrice": 167.4000},
            { "OrderDate": "/Date(836539200000)/", "ExtendedPrice": 1696.0000},
            { "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 77.0000},
            { "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 1261.4000},
            { "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 214.2000},
            { "OrderDate": "/Date(836798400000)/", "ExtendedPrice": 95.7600},
            { "OrderDate": "/Date(836798400000)/","ExtendedPrice": 222.3000}
        ];
    $(function () {
        $("#sparkline").igSparkline({
            dataSource: invoices,
            height: "100px",
            width: "300px",
            valueMemberPath: 'ExtendedPrice',
            labelMemberPath: 'OrderDate'
        });
    });
    </script>
</body>
</html>

Ignite UI | Help Topics

Adding igSparkline to an HTML Document

Topic Overview

Purpose

Required background

In this topic

Adding igSparkline to an HTML Document – Conceptual Overview

Adding igSparkline summary

Requirements

Steps

Adding igSparkline to an HTML Page

Introduction

Preview

Prerequisites

Overview

Steps

Related Content

Topics

Samples