Version

Binding to Live Data

Purpose

This topic demonstrates how to bind data to the igFinancialChart control. At the end of each section, a complete code sample is provided.

In this topic

This topic contains the following sections:

Introduction

The procedure below demonstrates how to bind the igFinancialChart control to live data. The igFinancialChart allows you to bind to JavaScript arrays. Nested collections are also supported.

Supported Chart Types

The ChartType property enables you to choose which series type you wish to display.

Supported series types:

  • Bar

  • Candle

  • Column

  • Line

Preview Binding to Data

The igFinancialChart control as implemented by the binding to data sample code:

financialchart jquery livedata.png

Overview Binding to Data

  1. Defining a Data Model

  2. Adding an Instance of the igFinancialChart control

  3. (Optional) Verifying the result

Steps – Binding to Data

Define Data

In JavaScript

function getData() {
    var data = PriceData.AMZN();
	return data;
}

Add an instance of the igFinancialChart Control

Add an instance of the igFinancialChart and bind it to the data:

In HTML

<div id="chart" style="width:800px;height:600px"></div>

In JavaScript

$(function () {
    var data = getData();
    $("#chart").igFinancialChart({
    	dataSource: data
    });
});

Finally you will want to update your data source with the new data you pull from your service.

After you update your data source you will then notify the chart by invoking one of the following functions:

(Optional) Verify the Result

Run your application to verify the result. If you have successfully bound the igFinancialChart control to the data collection, the resulting chart will look like the one shown above.

Related Content

Topics

The following topics provide additional information related to this topic:

Topic Purpose

This topic provides an overview of binding data to the Financial Chart control.

This article explains how to bind a single set data to the Financial Chart control.

This article explains how to bind multiple sets data to the Financial Chart control.

View on GitHub