Tutorials
Getting started
Chart interface
Web components
Chart internals
Data integration
Customization
Frameworks and bundlers
Mobile development
Plug-ins
Troubleshooting
Glossary
Reference
JSFiddles

Data Integration: Static Data

Initializing Charts with Arrays Of OHLC Data

The most basic way to push data into a chart is by initializing with a static array. The method CIQ.ChartEngine#loadChart takes an array of data as an optional second parameter.

Code Example:

var myData = [
	{ Date: "20160101", Close: 100 },
	{ Date: "20160102", Close: 101 },
	{ Date: "20160103", Close: 102 }
];

stxx.loadChart("IBM", {
	masterData: myData
});

Working Example:

- Click on the 'JavaScript' tab to see the code.

The array of data must match the (ChartIQ OHLC format)InputDataFormat. At a minimum, the array objects must contain Date and "Close" values.

Once a chart has been created and filled with data, a user can manipulate the chart by changing chart type (for instance, from "line" to "candlestick"), zooming, scrolling, etc. To change symbols, simply call loadChart() with a different symbol and data array.

Periodicity

Periodicity can be set at the time you initialize the chart with data. It is helpful to set the periodicity so that the chart can compute the x-axis and drawings accurately.

Code Example: Initializing a chart with 5 minute bars of data:

stxx.loadChart("IBM", {
	masterData: [
		/* ...data... */
	],
	periodicity: {
		interval: 5
	}
});

Working Example: Initializing a chart with 1 day bars using Ajax/JSON to retrieve data:

- Click on the 'JavaScript' tab to see the code.

Next steps