API Reference
Namespaces
Classes
Events
Global
Externals

Class: Renderer

CIQ. Renderer


new Renderer()

Base class for Renderers.

A renderer is used to draw a complex visualization based on one or more "series" of data. Renderers only need to be attached to a chart once. You can change symbols and continue using the same renderer. The series associated with a renderer may change at any time, but the linked renderer itself remains the vehicle for display them.

Series are associated with renderers by calling attachSeries(). More typically though, this is done automatically when CIQ.ChartEngine#addSeries is used. The parameters for addSeries() are passed both to the renderer's constructor and also to attachSeries().

To manually create a renderer use CIQ.ChartEngine#setSeriesRenderer

Classes

Bars
Candles
CrossSection
HLC
HLCBox
Heatmap
Histogram
Lines
MarketDepth
OHLC
Scatter
Shading
SimpleHistogram

Members


init :object

You may set any initial parameters of the renderer here, and they will be used as default values in the renderer's params object. In order for these init values to take effect, they must be set on the prototype before the renderer is produced. This object is useful when you do not have access to the constructor, like when using stxx.setChartType.

Type:
  • object
Since:
  • 8.4.0

Default Value:
  • {}
Example
// Turns on heads-up display mode for the market depth chart.
CIQ.Renderer.prototype.init = { headsUp: true };
stxx.setChartType("marketdepth_mountain_volume");

Methods


adjustYAxis()

If your renderer manages a y-axis then the necessary adjustments to its properties should be made here.

Since:
  • 5.2.0


attachSeries(id, parameters)

Attach a series to the renderer.

This assumes that the series data is already in the dataSet and simply connects it to the renderer with the specified parameters. See CIQ.ChartEngine#addSeries for details on how to create a series.

Any parameters defined when attaching a series, such as colors, will supersede any defined when a series was created. This allows you to attach the same series to multiple renderers, each rendering displaying the same series data in a different color, for example.

Parameters:
Name Type Description
id string

The name of the series.

parameters object | string

Settings to control color and opacity of each series in the group. See CIQ.ChartEngine#addSeries for implementation examples.

Argument format can be:

  • a string containing the color
  • or a more granular object having the following members:

Properties
Name Type Argument Default Description
field string <optional>

The name of the field. Name of the field in the dataSet to use for the series. If omitted, defaults to id

fill_color_up string <optional>

Color to use to fill the part when the Close is higher than the previous (or 'transparent' to not display)

border_color_up string <optional>

Color to use to draw the border when the Close is higher than the previous (or 'transparent' to not display)

opacity_up number <optional>
.4

Opacity to use to fill the part when the Close is higher than the previous (0.0-1.0)

border_color_even string <optional>

Color to use to draw the border when the Close is equal to the previous (or 'transparent' to not display)

fill_color_down string <optional>

Color to use to fill the part when the Close is lower than the previous (or 'transparent' to not display)

border_color_down string <optional>

Color to use to draw the border when the Close is lower than the previous (or 'transparent' to not display)

opacity_down number <optional>
.4

Opacity to use to fill the part when the Close is lower than the previous (0.0-1.0)

color string <optional>

Color to use to fill the series in the absence of specific up/down color.

border_color string <optional>

Color to use to draw the border in the series in the absence of specific up/down color.

fillStyle string <optional>

Color to use to fill the mountain chart.

baseColor string <optional>

Color to use at the bottom of the mountain chart, will create a gradient with bgColor

bgColor string <optional>

Color to use at the top of the mountain chart, will create a gradient if baseColor is specified. Otherwise, will fill the mountain solid with this color unless fillStyle is specified

permanent boolean <optional>

Whether the attached series can be removed by the user (lines and bars only). By default, the series will not be permanent. This flag (including the default) will supersede the permanent flag of the actual series. As such, a series will not be permanent unless you set this flag to 'true', even if the series being attached was flaged set as permanent when defined. This gives the renderer most control over the rendering process.

Since:
  • 5.1.0 Added fillStyle, baseColor, and bgColor parameters.

Returns:

Returns a copy of this for chaining

Type
CIQ.Renderer
Example
// add multiple series and attach to a custom y-axis on the left.
	// See this example working here : https://jsfiddle.net/chartiq/b6pkzrad

	// note how the addSeries callback is used to ensure the data is present before the series is displayed

	//create the custom axis
	var axis=new CIQ.ChartEngine.YAxis();
	axis.position="left";
	axis.textStyle="#FFBE00";
	axis.decimalPlaces=0;			// no decimal places on the axis labels
	axis.maxDecimalPlaces=0;		// no decimal places on the last price pointer

	//create the renderer
	var renderer=stxx.setSeriesRenderer(new CIQ.Renderer.Lines({params:{name:"my-renderer", type:"mountain", yAxis:axis}}));

	// create your series and attach them to the chart when the data is loaded.
	stxx.addSeries("NOK", {display:"NOK",width:4},function(){
		renderer.attachSeries("NOK", "#FFBE00").ready();
	});

	stxx.addSeries("SNE", {display:"Sony",width:4},function(){
		renderer.attachSeries("SNE", "#FF9300").ready();
	});

construct(config)

Default constructor for a renderer. Override this if desired.

Parameters:
Name Type Description
config object

Configuration for the renderer.

Properties
Name Type Argument Description
callback function <optional>

Callback function to perform activity post-drawing, for example, creating a legend. It will be called with an object containing the list of instruments and corresponding colors.

id string <optional>

Handle to access the rendering in the future. If not provided, one will be generated.

params object <optional>

Parameters to control the renderer itself

Properties
Name Type Argument Default Description
name string <optional>
"Data"

Name of the renderer. This is used when displaying error message on screen

panel string <optional>
"chart"

The name of the panel to put the rendering on.

overChart boolean <optional>
true

If set to false, will draw the rendering behind the main chart rather than over it. By default, rendering will be as overlay on the main chart.

yAxis boolean <optional>

Y-axis object to use for the series.

opacity number <optional>
1

Opacity of the rendering as a whole. Can be overridden by an opacity set for a series. Valid values are 0.0-1.0.
Not applicable on Lines with a type of mountain; use an "RGBA" color instead.

binding object <optional>

Allows the use of the study output colors within the renderer. See an example in the Using Renderers to Display Study Output section of the Studies tutorial.

Since:
  • 5.2.0 config.params.binding parameter added.

Example
// add multiple series and attach to a custom y-axis on the left.
	// See this example working here : https://jsfiddle.net/chartiq/b6pkzrad

	// note how the addSeries callback is used to ensure the data is present before the series is displayed

	//create the custom axis
	var axis=new CIQ.ChartEngine.YAxis();
	axis.position="left";
	axis.textStyle="#FFBE00";
	axis.decimalPlaces=0;			// no decimal places on the axis labels
	axis.maxDecimalPlaces=0;		// no decimal places on the last price pointer

	//create the renderer
	var renderer=stxx.setSeriesRenderer(new CIQ.Renderer.Lines({params:{name:"my-renderer", type:"mountain", yAxis:axis}}));

	// create your series and attach them to the chart when the data is loaded.
	stxx.addSeries("NOK", {display:"NOK",width:4},function(){
		renderer.attachSeries("NOK", "#FFBE00").ready();
	});

	stxx.addSeries("SNE", {display:"Sony",width:4},function(){
		renderer.attachSeries("SNE", "#FF9300").ready();
	});

draw()

Perform drawing operations here.


drawIndividualSeries(chart [, parameters])

Draws one series from the renderer.

Called by CIQ.ChartEngine.AdvancedInjectable#drawSeries

Parameters:
Name Type Argument Description
chart CIQ.ChartEngine.Chart

The chart object to draw the renderers upon

parameters object <optional>

Parameters used to draw the series, depends on the renderer type

Properties
Name Type Argument Description
panel string <optional>

Name of panel to draw the series upon

Since:
  • 5.1.0


getDependents(stx)

Returns an array of all renderers that depend on a given renderer.

A dependent renderer is one that has params.dependentOf set to another renderer's name.

Parameters:
Name Type Description
stx CIQ.ChartEngine

A chart object.

Since:
  • 7.3.0

Returns:

Array of dependent renderers.

Type
array

getYAxis(stx)

Returns the y-axis used by the renderer.

Parameters:
Name Type Description
stx CIQ.ChartEngine

chart engine object

Since:
  • 7.1.0

Returns:

Y-axis

Type
CIQ.ChartEngine.YAxis

performCalculations()

This function is no longer used by the library. Use CIQ.Renderer#adjustYAxis instead.

Deprecated:
  • As of 5.2.0. no longer used in library..


ready()

Call this to immediately render the visualization, at the end of a chain of commands.

Returns:

A copy of this for chaining

Type
CIQ.Renderer

removeAllSeries( [eraseData])

Removes all series from the renderer and the y-axis from the panel if it is not being used by any current renderers.

Parameters:
Name Type Argument Default Description
eraseData boolean <optional>
false

Set to true to erase the actual series data in the CIQ.ChartEngine otherwise it will be retained

Returns:

A copy of this for chaining

Type
CIQ.Renderer

removeSeries(id [, preserveSeries])

Removes a series from the renderer.

The yAxis and actual series data will also be removed if no longer used by any other renderers. When the last series is removed from the renderer, the chart it is attached to will remove the renderer. Will turn off comparison mode if there are no more comparisons on the chart if CIQ.ChartEngine.Chart#forcePercentComparison is true.

Parameters:
Name Type Argument Default Description
id string

The field name of the series.

preserveSeries boolean <optional>
false

Set to true to keep the series data in the CIQ.ChartEngine objects, otherwise it will be deleted.

Since:
  • 2015-07-01 'preserveSeries' is now available.
  • 3.0.0 Series is now removed even if series parameter permanent is set to true. The permanent parameter only prevents right click user interaction and not programmatically requested removals.
  • 4.0.0 Series data is now totally removed from masterData if no longer used by any other renderers.
  • 6.2.0 No longer force 'percent'/'linear', when adding/removing comparison series, respectively, unless CIQ.ChartEngine.Chart#forcePercentComparison is true. This allows for backwards compatibility with previous UI modules.
Returns:

A copy of this for chaining

Type
CIQ.Renderer

undraggable(stx)

Returns whether the renderer can be dragged to another axis or panel.

Parameters:
Name Type Description
stx CIQ.ChartEngine

A chart object.

Since:
  • 7.3.0

Returns:

true, if not allowed to drag.

Type
boolean

registerColorFunction(name, funct)

Registers a colorFunction for use with a renderer.

It is necessary to register a color function if you want the function to be tied back to an imported renderer.

Parameters:
Name Type Description
name string

The name of the registered function

funct function

The function to register


unregisterColorFunction(name)

Unregisters a colorFunction for use with a renderer.

Parameters:
Name Type Description
name string

The name of the registered function

Type Definitions


colorFunction()

See:
  • CIQ.ChartEngine~colorFunctionnew