Class: Heatmap

CIQ.Renderer. Heatmap


new Heatmap(config)

Creates a Heatmap renderer.

See CIQ.Renderer#construct for parameters required by all renderers.

Each attached series will represent a stream of colors for the heatmap.

Note special data formatting when using addSeries, where the custom field that will be used for the stream of datapoints (Bids in our example), is an array of values.

Visual Reference - single color series:
img-histogram-single-color

For advanced heatmap implementations where all the data is received already with a color for each datapoint, use an injection that directly calls CIQ.ChartEngine#drawHeatmap as outlined in this example:

Parameters:
Name Type Description
config Object

Config for renderer

Properties
Name Type Argument Description
params object <optional>

Parameters to control the renderer itself

Properties
Name Type Argument Default Description
widthFactor number <optional>
1

Width of each bar as a percentage of the candleWidth. Valid values are 0.00-1.00.

height number <optional>

The amount of vertical space to use, in price units. For example, 2=>2 unit increments on yaxis.

Version:
  • ChartIQ Advanced Package
Example
// note special data formatting, where the custom field name that will be used for the stream of datapoints, is an array of values.
var renderer = stxx.setSeriesRenderer(new CIQ.Renderer.Heatmap());
stxx.addSeries(
	"L2",
	{
		data: [
			{ DT: "2019-01-04", Bids: [100, 100.3, 100.2, 101] },
			{ DT: "2019-01-07", Bids: [101, 101.5, 102, 103] },
			{ DT: "2019-01-08", Bids: [101.2, 101.5, 101.7, 102] },
			{ DT: "2019-01-09", Bids: [101.3, 101.7, 101.9] },
			{ DT: "2019-01-10", Bids: [102] }
		]
	},
	function() {
		renderer.attachSeries("L2", { field: "Bids", color: "#FF9300" }).ready();
	}
);