Version

Binding to Multiple Data Sets

Purpose

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

Introduction

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

The igFinancialChart cannot plot multiple data sources on the XAxis in Time mode if the number of items in the data sources is not the same. The control also will not align items of multiple data sources. As a result, developers should align data items by inserting null items where one data source does not have corresponding items with another data source.

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 multidata.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 getMultiData() {
    var data = [];
    data.push(PriceData.AMZN());
    data.push(PriceData.GOOG());
    data.push(PriceData.MSFT());
    data.push(PriceData.TGT());
    data.push(PriceData.TSLA());

    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 = getMultiData();
    $("#chart").igFinancialChart({
    	dataSource: data
    });
});

(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 live data to the Financial Chart control.

View on GitHub