The dynamic heads-up display web component <cq-hu-dynamic>
.
An encapsulation of the markup of a dynamic heads-up display.
- Since:
-
7.5.0
Example
<cq-hu-dynamic>
<svg version="1.1" x="0px" y="0px" viewBox="0 0 215 140" enableBackground="new 0 0 215 140">
<defs>
<filter id="ciq-hu-shadow" height="130%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1"></feGaussianBlur>
<feOffset dx="0" dy="1" result="offsetblur"></feOffset>
<feComponentTransfer>
<feFuncA type="linear" slope="0.2"></feFuncA>
</feComponentTransfer>
<feMerge>
<feMergeNode></feMergeNode>
<feMergeNode in="SourceGraphic"></feMergeNode>
</feMerge>
</filter>
</defs>
<polygon
class="ciq-hu-bg"
style="stroke-width: 1;"
points="198.4,124.4 1,124.4 1,1 214,1 214,137.8"
filter="url(#ciq-hu-shadow)"
/>
<path
class="ciq-hu-stroke"
fill="#398DFF"
d="M213,2v133.6l-13.7-11.8l-0.6-0.5H198H2V2H213 M215,0H0v125.4h198l17,14.6V0L215,0z"
></path>
</svg>
<div>
<cq-hu-col1>
<cq-hu-date></cq-hu-date>
<cq-hu-price></cq-hu-price>
<cq-volume-grouping>
<div>Volume</div>
<div>
<cq-volume-visual></cq-volume-visual>
</div>
<div>
<cq-hu-volume></cq-hu-volume>
<cq-volume-rollup></cq-volume-rollup>
</div>
</cq-volume-grouping>
</cq-hu-col1>
<cq-hu-col2>
<div>Open</div>
<cq-hu-open></cq-hu-open>
<div>Close</div>
<cq-hu-close></cq-hu-close>
<div>High</div>
<cq-hu-high></cq-hu-high>
<div>Low</div>
<cq-hu-low></cq-hu-low>
</cq-hu-col2>
</div>
</cq-hu-dynamic>
Methods
-
setContext(context)
-
Creates an instance of CIQ.UI.HeadsUp. Subscribes to the
headsUp
channel which provides messages to start and stop the marker.Parameters:
Name Type Description context
CIQ.UI.Context The chart user interface context.
- Since:
-
7.5.0