Getting started
Chart interface
Web components
Chart internals
Data integration
Frameworks and bundlers
Mobile development
Time Span Events
Term structures

Creating Static Charts

Although the library was designed to provide users with a highly interactive chart, it is possible to streamline functionality and convert it to render 'postage stamp' static charts.

The following instructions can be used to disable all interactive related functionality and reduce overhead:

1- Set stxx.manageTouchAndMouse = false; to disable all chart interaction events and create a static chart. If you want to selectively disable some, you will need to copy the default CIQ.ChartEngine.prototype.registerTouchAndMouseEvent function in chartiq.js and create your own custom version as an override.

2- Optionally, bypass creation of most HTML overlays by creating a streamlined version of the CIQ.ChartEngine.htmlControls object.

3- Another aspect that affects initial rendering time is parsing the CSS. You can mitigate this by passing in a hard coded object of minimal styles instead.

4- Disable all cross-hair creation and maintenance if you wish to further reduce chart footprint.

5- The biggest culprit in load and processing time, of course, is the data loading. Static push loading is going to be much faster than using a quotefeed. Keep the data small and the memory footprint should be small. So don't use a quotefeed but instead just push the data by sending it in an array when you call loadChart(). That will also streamline the loading time.

CIQ.ChartEngine.htmlControls = {
	home: "<div></div>",
	handleTemplate: "<div></div> ",
		'<div class="stx-panel-control"><div class="stx-panel-title"></div><div class="stx-btn-panel"><span class="stx-ico-up"></span></div><div class="stx-btn-panel"><span class="stx-ico-focus"></span></div><div class="stx-btn-panel"><span class="stx-ico-down"></span></div><div class="stx-btn-panel"><span class="stx-ico-edit"></span></div><div class="stx-btn-panel"><span class="stx-ico-close"></span></div></div>',
	baselineHandle: "<div></div>"

var stxx = new CIQ.ChartEngine({ container: document.querySelector(".chartContainer") });

stxx.prepend("createCrosshairs", function() {
	return true;
}); //disable cross-hair creation
stxx.prepend("positionCrosshairsAtPointer", function() {
	return true;
}); //disable cross-hair placement
stxx.resizeDetectMS = 0; // disable re-size checking timer
stxx.manageTouchAndMouse = false; // don't register or track any user interaction

Simple Example:

Creating Images

Alternatively, you can create images of the charts server side and just post them as images.
Use canvas.toDataURL() to turn the chart engine into a factory that produces images.


stxx.loadChart(symbol, { masterData: data }, function() {
	imageNode.src = this.chart.canvas.toDataURL();

Next steps