Namespace: AdvancedInjectable

CIQ.ChartEngine. AdvancedInjectable

The following is a list of ADVANCED injectable methods.

These methods should not be normally called by your code, but rather injections should be used to modify their behavior within the library Kernel.

The "Injection API" provides prepend and append functionality to any built-in method. Essentially what this means is that a developer can write code that will be run either before (prepend) or after (append) any internal CIQ.ChartEngine function (such as draw() or mouseMove()). This gives developers the ability to supplement, override or ignore any of the built in functionality.

Note that you may prepend or append multiple functions. Each injected function is stacked "outward" (daisy-chained) from the core function.

prepend >> prepend >> prepend >> function << append << append << append

You may prepend/append either to CIQ.ChartEngine.prototype or directly to a CIQ.ChartEngine instance.

See the Using the Injection API and Customization Basics tutorials for additional guidance and examples.

Examples

CIQ.ChartEngine.prototype.append("method_name_goes_here", function(){
	// do something here
});
CIQ.ChartEngine.prototype.prepend("method_name_goes_here", function(){
	// do something here
	// return true; // if you want to exit the method after your injection
	// return false; // if you want the standard code to follow the prepend
});

Methods


adjustPanelPositions()

INJECTABLE Adjusts the positions of all of the panels. Ensures that panel percentages add up to 100%. Sets the panel top and bottom based on the percentages. Also sets the icon template icons appropriately for each panel's position. And adjusts any drawings. Finally it makes some calculations that are used by the y-axis.


consolidatedQuote(quotes, params)

INJECTABLE Consolidates a quote array, aligning to the market iteration times. This is called by CIQ.ChartEngine#createDataSet to roll up intervals (including week and month from daily data).

Parameters:
Name Type Description
quotes array

The quote array to consolidate

params object

Override parameters

Properties
Name Type Argument Description
periodicity number <optional>

Periodicity to use, if omitted, uses periodicity, interval and timeUnit from layout

interval number <optional>

Interval to use, if omitted, uses periodicity, interval and timeUnit from layout

timeUnit number <optional>

Time unit to use, when periodicity and interval are supplied

Since:
  • 3.0.0 signature change
Returns:

The consolidated quote array

Type
array

correctIfOffEdge(theChart)

INJECTABLE Animation Loop This method ensures that the chart is not scrolled off of either of the vertical edges. See CIQ.ChartEngine#minimumLeftBars, CIQ.ChartEngine.Chart#allowScrollPast, and CIQ.ChartEngine.Chart#allowScrollFuture for adjustments to defaults.

Parameters:
Name Type Description
theChart CIQ.ChartEngine.Chart

The chart to check


createCrosshairs()

INJECTABLE Animation Loop Registers mouse events for the crosshair elements (to prevent them from picking up events)


createDataSegment( [theChart])

INJECTABLE Animation Loop Creates the dataSegment. The dataSegment is a copy of the portion of the dataSet that is observable in the current chart. That is, the dataSegment is a "view" into the dataSet. chart.scroll and chart.maxTicks are the primary drivers for this method.

Parameters:
Name Type Argument Description
theChart CIQ.ChartEngine.Chart <optional>

If passed then a data segment will be created just for that chart, otherwise all charts


createPanel(display, name [, height] [, chartName])

INJECTABLE Create a new panel and make room for it by squeezing all the existing panels. To remove a panel manually call CIQ.ChartEngine.AdvancedInjectable#panelClose.

Parameters:
Name Type Argument Description
display string

The display name for the panel

name string

The name of the panel (usually the study ID)

height number <optional>

Requested height of panel in pixels. Defaults to 1/5 of the screen size.

chartName string <optional>

The chart to associate with this panel. Defaults to "chart".


createXAxis(chart)

INJECTABLE Animation Loop Call this method to create the X axis (date axis). Uses CIQ.ChartEngine#createTickXAxisWithDates.

Use css styles stx_xaxis and stx_xaxis_dark to control colors and fonts for the dates.
Use css styles stx_grid_border, stx_grid and stx_grid_dark to control the grid line colors.
The dark styles are used when the grid changes to a major point such as the start of a new day on an intraday chart, or a new month on a daily chart.

See Custom X-axis and CSS Overview for additional details.

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

The chart to create an x-axis for

Returns:

axisRepresentation that can be passed in to CIQ.ChartEngine#drawXAxis

Type
Array.<CIQ.ChartEngine.XAxisLabel>

createYAxis(panel [, parameters] [, yAxis])

INJECTABLE Animation Loop Call this method to create the data that will be displayed on the Y axis (price axis). It does not actually render the Y axis; this is done by CIQ.ChartEngine.AdvancedInjectable#drawYAxis

Managing Decimal Places

The Y-Axis automatically manages decimal place precision. The default behavior is to set the number of decimal places based on the values set in CIQ.ChartEngine.YAxis#shadowBreaks in relation to the size of the shadow. You may override this by setting stxx.chart.yAxis.decimalPlaces equal to a hard set number of decimal places. stxx.chart.panel.yAxis.minimumPriceTick can be set to specify that the y-axis vertical grid be drawn with specific ranges. eg stxx.chart.panel.yAxis.minimumPriceTick=.25 For more configurable parameters, see the CIQ.ChartEngine.YAxis.

Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel

The panel to create the y-axis

parameters object <optional>

Parameters to drive the y-axis

Properties
Name Type Argument Description
noDraw boolean <optional>

If true then make all the calculations but don't draw the y-axis. Typically used when a study is going to draw its own y-axis.

semiLog boolean <optional>

Calculate the y-axis as a semi-log scale.

ground boolean <optional>

Tie the bottom of the y-Axis to the bottom-most value of the plot.

yAxis CIQ.ChartEngine.YAxis <optional>

The yAxis to create. Defaults to panel.yAxis.


deleteHighlighted()

INJECTABLE Removes any and all highlighted overlays, series or drawings.

Since:
  • 4.1.0 Removes a renderer from the chart if it has no series attached to it.

displayChart(chart)

INJECTABLE Animation Loop Displays the chart by calling the appropriate rendering functions based on the CIQ.ChartEngine#chartType.

The following styles are used for determining color and/or line width:

  • kagi : stx_kagi_up, stx_kagi_down

  • pandf : stx_pandf_up, stx_pandf_down

  • line and step : stx_line_chart

  • colored_mountain : stx_colored_mountain_chart,stx_line_up,stx_line_down

  • colored_line and colored_step : stx_line_chart,stx_line_up,stx_line_down

  • bar and hlc : stx_bar_chart

  • colored_bar and colored_hlc : stx_bar_chart,stx_bar_up,stx_bar_down,stx_bar_even

  • hollow_candle and volume_candle : stx_hollow_candle_up, stx_hollow_candle_down,stx_hollow_candle_even

  • candle : stx_candle_shadow_up,stx_candle_shadow_down,stx_candle_shadow,stx_candle_up,stx_candle_down

  • histogram : stx_histogram_up,stx_histogram_down,stx_histogram_even

  • baseline_delta : stx_baseline_up,stx_baseline_down

  • baseline_delta_mountain : stx_baseline_delta_mountain,stx_baseline_up,stx_baseline_down

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

The chart to render

Since:
  • 4.0.0 if no Open price is available, a candle will draw as a dash at the Close price.

doDisplayCrosshairs()

INJECTABLE This is an internal method that temporarily toggles whether the crosshairs are visible or not based on where the user's mouse pointer is located. When the user moves the mouse out of the chart, or over a modal, then the crosshairs are made invisible. Crosshairs will only be shown of course if crosshair state is enabled. Crosshair state is enabled with a call to the public method CIQ.ChartEngine.showCrosshairs. Crosshair state is also enabled automatically when a drawing tool is active.

Do not call this method to change crosshair state (for instance when a user clicks on a crosshair icon). Use CIQ.ChartEngine.showCrosshairs and CIQ.ChartEngine.hideCrosshairs for toggling state.

This is the counter method to CIQ.ChartEngine.undisplayCrosshairs which is called, for instance, when the user mouses out of the chart or mouses over a chart element.

Since:
  • 5.0.0 no longer allows the crosshair to be enabled if mouse pointer is outside the chart.

drawCurrentHR()

INJECTABLE Animation Loop Draws a label for the last price in the main chart panel's y-axis using CIQ.ChartEngine#createYAxisLabel

It will also draw a horizontal price line if CIQ.ChartEngine#preferences.currentPriceLine is true.

It will not draw a line or a label if CIQ.ChartEngine.YAxis#drawCurrentPriceLabel is false for that particular axis.

Label style: stx_current_hr_down and stx_current_hr_up


drawPanels()

INJECTABLE Animation Loop Draws the panels for the chart and chart studies. CSS style stx_panel_border can be modified to change the color or width of the panel dividers.


drawSeries(chart, seriesArray [, yAxis])

INJECTABLE Animation Loop Draws each series from the seriesRenderer on the chart. This is called by CIQ.ChartEngine#rendererAction

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

The chart object to draw the series

seriesArray Array

The series object iterate through, defaults to chart.series

yAxis CIQ.ChartEngine.YAxis <optional>

Optional yAxis to plot against

Since:

drawSeriesRenderers(chart, phase)

INJECTABLE Animation Loop Draws the series renderers on the chart. The renderers are located in seriesRenderers. Each series in each seriesRenderer should be represented by the same name in the dataSet. See CIQ.ChartEngine#addSeries

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

The chart object to draw the renderers upon

phase string

Values "overlay","underlay","calculate","yaxis"


drawVectors()

INJECTABLE Animation Loop Draws the drawings (vectors). Each drawing is iterated and asked to draw itself. Drawings are automatically clipped by their containing panel.


drawXAxis(chart, axisRepresentation)

INJECTABLE Animation Loop Draws the x-axis. This assumes that the axisRepresentation has previously been calculated by CIQ.ChartEngine.AdvancedInjectable#createXAxis

Use css styles stx_xaxis and stx_xaxis_dark to control colors and fonts for the dates.
Use css styles stx_grid_border, stx_grid and stx_grid_dark to control the grid line colors.
The dark styles are used when the grid changes to a major point such as the start of a new day on an intraday chart, or a new month on a daily chart.

See Custom X-axis and CSS Overview for additional details.

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

Chart object

axisRepresentation Array.<CIQ.ChartEngine.XAxisLabel>

Axis representation object created by createXAxis. This should be an array of axis labels.


drawYAxis(panel, parameters [, yAxis])

INJECTABLE Animation Loop

This method draws the y-axis. It is typically called after CIQ.ChartEngine.AdvancedInjectable#createYAxis.

Use css styles stx_xaxis and stx_xaxis_dark to control colors and fonts for the dates.
Use css styles stx_grid_border, stx_grid and stx_grid_dark to control the grid line colors.
The dark styles are used when the grid changes to a major point such as the start of a new day on an intraday chart, or a new month on a daily chart.

See CSS Overview for additional details.

Parameters:
Name Type Argument Description
panel CIQ.ChartEngine.Panel

The panel to draw the y-axis

parameters object

Parameters for the y-axis (only used internally. Send {} when calling this method directly).

Properties
Name Type Argument Description
range array <optional>

Optionally set the range of values to display on the y-axis. For instance [0,100] would only print from zero to one hundred, regardless of the actual height of the y-axis. This is useful if you want to add some buffer space to the panel but don't want the y-axis to actually reveal nonsensical values.

yAxis CIQ.ChartEngine.YAxis <optional>

The yAxis to use. Defaults to panel.yAxis.

Returns:
Type
undefined

grabHandle(e, panel)

INJECTABLE Event handler that is called when the handle of a panel is grabbed, for resizing

Parameters:
Name Type Description
e Event

The mousedown or touchdown event

panel CIQ.ChartEngine.Panel

The panel that is being grabbed


handleMouseOut(e)

INJECTABLE This is called whenever the mouse leaves the chart area. Crosshairs are disabled, stickies are hidden, dragDrawings are completed.

Parameters:
Name Type Description
e Event

The mouseout event


headsUpHR()

INJECTABLE This method calls CIQ.ChartEngine#updateFloatHRLabel to draw the label that floats along the Y axis with the current price for the crosshair. It also fills the date in the "stxx.controls.floatDate" (Style: stx-float-date) div which floats along the X axis. This is an appropriate place to inject an append method for drawing a head's up display if desired.

You can override the CIQ.ChartEngine#hideDates method to decide if/when you want to hide the floating date.

Since:
  • 09-2016-19 only year and month will be displayed in monthly periodicity

initializeDisplay(chart)

INJECTABLE Animation Loop

This method initializes display variables for the chart. It is part of the animation loop and called with every draw() operation. The high and low values for the displayed chart are calculated. Those values are subsequently used by CIQ.ChartEngine.AdvancedInjectable#createYAxis which is called from within this method. This method also calls CIQ.ChartEngine#createCrosshairs.

chart.highValue - The highest value on the chart chart.lowValue - The lowest value on the chart

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

The chart to initialize


magnetize()

INJECTABLE Calculates the magnet point for the current mouse cursor location. This is the nearest OHLC point. A small white circle is drawn on the temporary canvas to indicate this location for the end user. If the user initiates a drawing then the end point of the drawing will be tied to the magnet point. This function is only entered if preferences.magnet is true and a drawing type (CIQ.ChartEngine#currentVectorParameters.vectorType) has been enabled.


mousedown(e)

INJECTABLE Called when the user presses the mouse button down. This will activate dragging operations once the user moves a few pixels within CIQ.ChartEngine#mousemoveinner.

Parameters:
Name Type Description
e Event

The mouse event


mousemove(mouseEvent)

INJECTABLE Handles mouse movement events. This method calls CIQ.ChartEngine#mousemoveinner which has the core logic for dealing with panning and zooming. See also CIQ.ChartEngine#touchmove which is the equivalent method for touch events.

Parameters:
Name Type Description
mouseEvent event

A mouse move event


mouseup(e)

INJECTABLE Called whenever the user lifts the mousebutton up. This may send a click to a drawing, or cease a drag operation.

Parameters:
Name Type Description
e Event

A mouse event


mouseWheel(e)

INJECTABLE Zooms (vertical swipe / mousewheel) or pans (horizontal swipe) the chart based on a mousewheel event. A built in timeout prevents the mousewheel from zooming too quickly.

Parameters:
Name Type Description
e Event

The event

Returns:

Returns false if action is taken

Type
boolean

panelClose(panel)

INJECTABLE Closes the panel opened with CIQ.ChartEngine.AdvancedInjectable#createPanel. This is called when a chart panel is closed manually or programatically. For example, after removing a study panel with the CIQ.Studies.removeStudy function, or when a user clicks on the "X" for a panel.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel to close


plotYAxisGrid(panel)

INJECTABLE Animation Loop

Draws the grid for the y-axis.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel for the y-axis


plotYAxisText(panel)

INJECTABLE Animation Loop

Plots the text on the y-axis.

Parameters:
Name Type Description
panel CIQ.ChartEngine.Panel

The panel for the y-axis


positionCrosshairsAtPointer()

INJECTABLE Positions the crosshairs at the last known mouse/finger pointer position. This ensures on touch devices that the crosshairs are at a known position. It is called by the DrawingToolbar.


positionMarkers()

INJECTABLE


releaseHandle(e)

Event handler that is called when a panel handle is released.

Parameters:
Name Type Description
e Event

The mouseup or touchup event


removeOverlay(name)

INJECTABLE Removes an overlay (and the associated study)

Parameters:
Name Type Description
name string

The name (id) of the overlay


renderYAxis(chart)

INJECTABLE Animation Loop

This method creates and draws the Y Axis for the chart

yAxis.high - The highest value on the y-axis yAxis.low - The lowest value on the y-axis

Parameters:
Name Type Description
chart CIQ.ChartEngine.Chart

The chart to create y-axis

Since:
  • 15-07-01

rightClickHighlighted()

INJECTABLE This function is called when the user right clicks on a highlighted overlay, series or drawing. Calls deleteHighlighted() which calls rightClickOverlay() for studies.


rightClickOverlay(name [, forceEdit])

INJECTABLE This function is called when a highlighted study overly is right clicked. If the overlay has an edit function (as many studies do), it will be called. Otherwise it will remove the overlay

Parameters:
Name Type Argument Description
name string

The name (id) of the overlay

forceEdit boolean <optional>

If true then force edit menu


stackPanel(display, name, percent [, chartName])

INJECTABLE Adds a panel with a prespecified percentage. This should be called iteratively when rebuilding a set of panels from a previous layout. Use CIQ.ChartEngine#createPanel when creating a new panel for an existing chart layout.

Parameters:
Name Type Argument Description
display string

The display name for the panel

name string

The name of the panel (usually the study ID)

percent number

The percentage of chart to use

chartName string <optional>

The chart to associate with this panel. Defaults to "chart".


touchDoubleClick(finger, x, y)

INJECTABLE This method detects a double tap on a touch device. It circumvents CIQ.ChartEngine#touchSingleClick. Double taps are used to delete overlays, series or drawings on touch devices. It also resets the vertical zoom level (y axis) if tapping on an empty area of the pannel ( see CIQ.ChartEngine#calculateYAxisMargins).

Parameters:
Name Type Description
finger number

Which finger double tapped.

x number

X location of screen of tap

y nubmer

Y location on screen of tap


touchend(e)

INJECTABLE Event handler for when a touch ends. If this occurs within 250 ms then CIQ.ChartEngine.touchSingleClick will be called. If two end events occur within 500 ms then CIQ.ChartEngine.touchDoubleClick will be called. If the user moves a significant enough distance between touch start and end events within 300ms then a swipe has occurred and CIQ.ChartEngine#swipeMove will be called.

Parameters:
Name Type Description
e Event

Touch event


touchmove(e)

INJECTABLE Handler for touch move events. This supports both touch (Apple) and pointer (Windows) style events. Zooming through pinch is handled directly in this method but otherwise most movements are passed to CIQ.ChartEngine.mousemoveinner. If CIQ.ChartEngine.allowThreeFingerTouch is true then a three finger movement will increment periodicity.

Parameters:
Name Type Description
e Event

The event


touchSingleClick(finger, x, y)

INJECTABLE This method captures a tap event (single click) on a touch device. It supports both touch and pointer events.

Parameters:
Name Type Description
finger number

Which finger is pressed

x number

X location on screen of the press

y number

Y location on screen of the press


touchstart(e)

INJECTABLE Event callback for when the user puts a new finger on the touch device. This supports both touch (Apple) and pointer (Windows) events. It is functionally equivalent to CIQ.ChartEngine#mousedown Set CIQ.ChartEngine.ignoreTouch to true to bypass all touch event handling.

Parameters:
Name Type Description
e Event

The touch event


undisplayCrosshairs()

INJECTABLE

This is called for instance when the user mouses out of the chart or over a chart control to temporarily make the crosshairs invisible. See also CIQ.ChartEngine.doDisplayCrosshairs.

Use CIQ.ChartEngine.hideCrosshairs to toggle crosshair state (such as when a user presses a crosshair icon)


undo()

INJECTABLE Stops (aborts) the current drawing. See CIQ.ChartEngine#undoLast for an actual "undo" operation.


updateChartAccessories()

INJECTABLE Updates the position of the stxx.controls.floatDate element ( Style: stx-float-date ) and calls CIQ.ChartEngine.AdvancedInjectable#headsUpHR to display the crosshairs labels on both x and y axis. A timer is used to prevent this operation from being called more frequently than once every 100 milliseconds in order to improve performance during scrolling.