Namespace: chartiq-chart

WebComponents. chartiq-chart

Chart setup web component <chartiq-chart>.

A formalized set of framework-independent reusable methods designed to initialize the different elements and configurations within a chart page.
Things such as instantiating a chart engine, setting up a quote feed, loading up the UI, setting up market definitions, etc. are all managed here.

This is used on our Frameworks applications, such as our React Application, in lieu of the script tags and standalone chart configuration functions you can see in our sample-template-advanced.html template.

Please overwrite individual methods as needed to achieve your desired use case.

Since:
  • 7.0.0

Example

React example from WrappedChart.jsx to render the ChartIQ chart canvas and associated DOM elements

import React from "react";
import { CIQ } from "chartiq";
import { ChartIQChart } from "components";
import TitleOverlay from "../Layout/TitleOverlay";
import ToolbarDrawing from "../Features/ToolbarDrawing";
import LoadingWidget from "./LoadingWidget";
import HeadsUpStatic from "../Features/HeadsUpStatic";
import HeadsUpDynamic from "../Features/HeadsUpDynamic";
import MarkerAbstract from "../Features/MarkerAbstract";
import DataAttribution from "../Features/DataAttribution";
import { ChartContext } from "../../react-chart-context";

export default class WrappedChart extends React.Component {
	constructor(props) {
		super(props);

		this.createEngine = container => {
			var config = {
				container: container,
				chart: props.chartConstructor,
				preferences: props.preferences
			};
			this.stxx = container.stxx = new CIQ.ChartEngine(config);
			container.CIQ = CIQ;
			container.$$$ = $$$;
			let addOns = props.addOns;
			container.startChart(this.stxx, this.feed, { refreshInterval: 1, bufferSize: 200 }, addOns);
			this.context.setContext({ stx: this.stxx });
		};

		this.engineRef = React.createRef();
		this.feed = this.props.quoteFeed || quoteFeedSimulator;
	}

	componentDidMount() {
		this.createEngine(this.engineRef.current);
		window.addEventListener("resize", this.resizeScreen.bind(this));
		this.resizeScreen();
	}

	resizeScreen() {
		let containerWidth = document.querySelector(".cq-chart-container").offsetWidth;

		document.body.classList.remove("break-lg", "break-md", "break-sm");
		if (containerWidth > 700) {
			document.body.classList.add("break-lg");
		} else if (containerWidth <= 700 && containerWidth > 584) {
			document.body.classList.add("break-md");
		} else if (containerWidth <= 584) {
			document.body.classList.add("break-sm");
		}
	}

	render() {
		const Comparison = React.forwardRef(
			(props, ref) => ref.current && <ChartComparison forwardeRef={ref} />
		);

		return (
			<React.Fragment>
				<div className={"ciq-chart-area"}>
					<div className={"ciq-chart"}>
						{this.context.stx && <ToolbarDrawing />}
						<chartiq-chart
							class="chartContainer"
							defer-start="true"
							animations="false"
							ref={this.engineRef}
						>
							{this.context.stx && <TitleOverlay refProp={this.engineRef} />}
							<LoadingWidget />
							{this.props.dynamicHeadsUp && this.context.stx && <HeadsUpDynamic />}

							{this.props.staticHeadsUp && this.context.stx && <HeadsUpStatic />}
							<DataAttribution />
						</chartiq-chart>
						{this.context.stx && <MarkerAbstract />}
					</div>
				</div>
			</React.Fragment>
		);
	}
}

WrappedChart.contextType = ChartContext;

Methods


configureDataSource()

Overwrite this method to extend and attach your own quoteFeed. This function should call CIQ.ChartEngine#attachQuoteFeed with the quoteFeed you wish to use or start streaming your data.

Since:
  • 7.0.0
Example
CIQ.UI.ChartIQChart.prototype.configureDataSource = function(feed, behavior) {
	if (feed) this.stx.attachQuoteFeed(feed, behavior);
	else this.stx.attachQuoteFeed(quoteFeedSimulator, { refreshInterval: 1 });
};

configureMarkets()

Overwrite this method to set up your chart with custom market classes.

Since:
  • 7.0.0
Examples

Default function

CIQ.UI.ChartIQChart.prototype.configureMarkets = function() {
	this.stx.setMarketFactory(CIQ.Market.Symbology.factory);
};

React example (from main.js file) on how to set the chart to 24 hours mode by removing the this.stx.setMarketFactory call.

import React from 'react'
import ReactDom from 'react-dom'
import { CIQ, $$$ } from 'chartiq'
// import { quoteFeedSimulator } from 'examples/feeds/quoteFeedSimulator'
import AdvancedChart from './containers/AdvancedChart'
let constructor = {}
let preferences = {labels:false, currentPriceLine:true, whitespace:0}
let enableAddOns = {InactivityTimer: {minutes:30}, ExtendedHours: {filter:true}, RangeSlider:true}

CIQ.UI.ChartIQChart.prototype.configureMarkets = function(){};
​
ReactDom.render(
React.createElement(AdvancedChart, {chartConstructor:constructor, preferences: preferences, addOns: enableAddOns}),
document.querySelector("#app")
)

startChart()

Main method to start the charts addOns, plugins, etc. By default will be called on the connected callback unless defer-start attribute is set to true. Should be called by another function to start the chart.

Expects a copy of the engine to be saved to this element.

Since:
  • 7.0.0
Example
CIQ.UI.ChartIQChart.prototype.startChart = function(engine, feed, behavior) {
	if (!this.stx) this.stx = engine;
	if (!this.stx)
		throw new Error(
			"no CIQ.ChartEngine created!\nDouble check that you have passed an engine into this function."
		);
	this.configureDataSource(feed, behavior);
	this.configureMarkets();
	this.configureAddOns();
	this.startUI();
};

startUI()

Overwrite this method to extend and start your own custom chart UI here. Called by the connectedCallback so you are guaranteed to have access to the DOM. Initialize anything you need for your UI here.

Since:
  • 7.0.0
Example
CIQ.UI.ChartIQChart.prototype.startUI = function() {
	this.setHeight();
	this.startComponentUI();
};