Custom Heads-Up-Display (HUD)

All sample GUI interfaces provided in the library package include a simple Heads-Up-Display on the upper right corner of the menu bar.

Example: HUD sample

By default it displays basic information about the primary chart symbol (Open, CLose, High. Low, Volume, Date). But it can be customized to include any data point rendered on the chart including studies and series overlays.

The look and feel of it can also be modified since it is a simple HTML list. Here is sample HTML showing what it may look like:

        <ul class="hu">
            <li><span class="huLabel">O: </span><span id="huOpen" class="huField"></span></li>
            <li><span class="huLabel">H: </span><span id="huHigh" class="huField"></span></li>
            <li><span class="huLabel">V: </span><span id="huVolume" class="huField"></span></li>
            <li><span class="huLabel">C: </span><span id="huClose" class="huField"></span></li>
            <li><span class="huLabel">L: </span><span id="huLow" class="huField"></span></li>
            <li><span class="huLabel">D: </span><span id="huDate" class="huField"></span></li>
        </ul>

The HUD data is updated trough an injection API to the headsUpHR function which renders the cross hairs.

The code for this injection is in the prependHeadsUpHR() function located on the HTML template file.

All of the available information for the particular crossHair tick is in placed in an object called prices. All you have do to is update the corresponding innerHTML of the placeholder you placed on your HTML page:

HUD

It is a good idea to clear up all the fields before you reset them, in case one of the fields is not available (if you have panned into the future, for example). This way you never display wrong data.

Here is sample code to illustrate the functionality:

function prependHeadsUpHR(){
    //var tick=Math.floor((CIQ.ChartEngine.crosshairX-this.left-this.micropixels)/this.layout.candleWidth);
    var tick=this.barFromPixel(this.cx);
    var prices=this.chart.xaxis[tick];
    $$("huOpen").innerHTML="";
    $$("huClose").innerHTML="";
    $$("huHigh").innerHTML="";
    $$("huLow").innerHTML="";
    $$("huDate").innerHTML="";
    $$("huVolume").innerHTML="";
    if(prices!=null){
        if(prices.data){
            $$("huOpen").innerHTML=this.formatPrice(prices.data.Open);
            $$("huClose").innerHTML=this.formatPrice(prices.data.Close);
            $$("huHigh").innerHTML=this.formatPrice(prices.data.High);
            $$("huLow").innerHTML=this.formatPrice(prices.data.Low);
            $$("huVolume").innerHTML=CIQ.condenseInt(prices.data.Volume);
            if(!CIQ.ChartEngine.hideDates()){
                var tickDate = prices.data.displayDate;
                if (!tickDate) tickDate = prices.data.DT;
                if (CIQ.ChartEngine.isDailyInterval(this.layout.interval)){
                    $$("huDate").innerHTML=CIQ.mmddyyyy(CIQ.yyyymmddhhmm(tickDate));        
                } else {
                    $$("huDate").innerHTML=CIQ.mmddhhmm(CIQ.yyyymmddhhmm(tickDate));                    
                }
            }
        }
    }
}

CIQ.ChartEngine.prototype.prepend("headsUpHR", prependHeadsUpHR);

If, for example, you wanted to add the MACD data to the HUD, pick the fields you want out of the prices object and add them to the code shown above.

Namely:

  • Signal macd (12,26,9)
  • MACD macd (12,26,9)
  • MACD1 macd (12,26,9)
  • MACD2 macd (12,26,9)
  • macd (12,26,9)_hist -- this is the data point for the histogram displayed on the study.

This is what the entire price object looks like when you have the MACD study enabled:

HUD sample

Note: The study names change depending on the settings you have selected. Different settings will cause different study names. This one includes (12,26,9), because it was set with a Fast MA Period of 12, Slow MA Period of 26 and Signal Period of 9. See the study tutorial for more details ( Custom Studies) . So your code needs to be smart enough to find the right MACD in the data set.

Anything displayed on the chart will have a corresponding variable on the prices object. You will need to create an HTML container for it to show up and set the value.