Tooltip for Candle Chart

[Raj Patel]

Could you guide me on how to configure and display the tooltip on the top? At the moment chart is not able to display any tooltip.

<script type="text/javascript">

//$(document).ready(function($){ loadChart(); })

 var chart1;
var annLT;   annLT = new cfx.annotation.Annotations();var annListLT = annLT.getList(); 
var annMT;   annMT = new cfx.annotation.Annotations();var annListMT = annMT.getList(); 
var annLTBB; annLTBB = new cfx.annotation.Annotations();var annListLTBB = annLTBB.getList(); 
var annMTBB; annMTBB = new cfx.annotation.Annotations();var annListMTBB = annMTBB.getList(); 
var annDiv;   annDiv = new cfx.annotation.Annotations();var annListDiv = annDiv.getList(); 
var annEPS;   annEPS = new cfx.annotation.Annotations();var annListEPS = annEPS.getList(); 
var annVol;   annVol = new cfx.annotation.Annotations();var annListVol = annVol.getList(); 

function loadChart()
{        
       
       chart1 = new cfx.Chart();
    chart1.getData().clear();
    PassData2();
//        AddBEC();
    AddDiv();
    AddEPS();

  chart1.setGallery(cfx.Gallery.OpenHighLowClose);

    //chart1.setGallery(cfx.Gallery.Candlestick);
    chart1.getAxisY().setPosition(cfx.AxisPosition.Far);
    chart1.getAxisY().setForceZero(false);
//    chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency);
    chart1.getSeries().getItem(0).setColor("#99FF99"); //
    chart1.getSeries().getItem(1).setColor("#99FF99"); //
    chart1.getSeries().getItem(2).setColor("#FF9999");
    chart1.getSeries().getItem(3).setColor("#9c9c9c");
    chart1.getAxisX().setStep(60);

 
    
chart1.getAxisY().getDataFormat().setDecimals(2);
chart1.getAxisY().getLabelsFormat().setDecimals(2);
chart1.getLegendBox().setVisible(false);

    //SB
    var series5 = chart1.getSeries().getItem(5);
    series5.setGallery(cfx.Gallery.Step);
    series5.setMarkerShape(cfx.MarkerShape.None); 
    series5.setColor("#32CD32"); //LimeGreen
    series5.setVisible(document.getElementById("LTSwitch").checked);
 

    //SR
    var series6 = chart1.getSeries().getItem(6);
    series6.setGallery(cfx.Gallery.Step);
    series6.setMarkerShape(cfx.MarkerShape.None); 
    series6.setColor("#ff0000"); // Opaque Red 
    series6.setVisible(document.getElementById("LTSwitch").checked);   

    //UB
    var series7 = chart1.getSeries().getItem(7);
    series7.setGallery(cfx.Gallery.Step);
    series7.setMarkerShape(cfx.MarkerShape.None); 
    series7.setColor("#32CCDD"); //LimeGreen
    series7.setVisible(document.getElementById("MTSwitch").checked);

    //UR
    var series8 = chart1.getSeries().getItem(8);
    series8.setGallery(cfx.Gallery.Step);
    series8.setMarkerShape(cfx.MarkerShape.None); 
    series8.setColor("#4FFF0000"); //pink
    series8.setVisible(document.getElementById("MTSwitch").checked);

  //UB0 - Downtrend resistance band
    var series9 = chart1.getSeries().getItem(9);
    series9 .setGallery(cfx.Gallery.Step);
    series9 .setMarkerShape(cfx.MarkerShape.None); 
    series9 .setColor("#ff0000"); //red
    series9 .getLine().setWidth(2);

 //LB1 - Uptrend support band
    var series10 = chart1.getSeries().getItem(10);
    series10 .setGallery(cfx.Gallery.Step);
    series10 .setMarkerShape(cfx.MarkerShape.None); 
    series10 .setColor("#0000ff"); //light blue
    series10 .getLine().setWidth(2);
    
var volumePane = new cfx.Pane();
chart1.getPanes().add(volumePane);
volumePane.getTitle().setText("Volume (in 100k)");
//volumePane.setProportion(1);
chart1.getPanes().getItem(1).setProportion(.1);
var volumeSeries = chart1.getSeries().getItem(4);
volumeSeries.setPane(volumePane);
volumeSeries.setGallery(cfx.Gallery.Bar);
volumeSeries.setVolume(100);
volumeSeries.conditionalVolume = true;
volumeSeries.getAxisY().setScaleUnit(100000);
volumeSeries.getAxisY().setPosition(cfx.AxisPosition.Far);
volumeSeries.conditionalVolume = true;

AddLT_Annotations();
AddMT_Annotations();

     var  ForecastLT  = document.getElementById("LTForecast").checked;
         if(ForecastLT)
            {}
        else
        {chart1.getExtensions().remove(annLT);}    
     var  ForecastMT  = document.getElementById("MTForecast").checked;
         if(ForecastMT)
            {}
        else
        {chart1.getExtensions().remove(annMT);}     
     
 document.getElementById("LTSwitch").addEventListener("click", function()
    {
  var  DisplayedLT  = document.getElementById("LTSwitch").checked;
     if(DisplayedLT)
            {series5.setVisible(true);series6.setVisible(true);}
    else
        {series5.setVisible(false);series6.setVisible(false);}    
     });
 document.getElementById("MTSwitch").addEventListener("click", function()
    {
  var  DisplayedMT  = document.getElementById("MTSwitch").checked;
     if(DisplayedMT)
            {series7.setVisible(true);series8.setVisible(true);}
    else
        {series7.setVisible(false);series8.setVisible(false);}    
     });

   document.getElementById("STSwitch").addEventListener("click", function()
    {
  var  DisplayedST  = document.getElementById("STSwitch").checked;
     if(DisplayedST)
            {
        series9.setVisible(true);
        series10.setVisible(true);
        }
    else
        {series9.setVisible(false);
        series10.setVisible(false);
        }    
     });

document.getElementById("LTForecast").addEventListener("click", function()
    {
  var  ForecastLT  = document.getElementById("LTForecast").checked;
     if(ForecastLT)
            {AddLT_Annotations();}
    else
        {chart1.getExtensions().remove(annLT);}    
     });

document.getElementById("MTForecast").addEventListener("click", function()
    {
  var  ForecastMT  = document.getElementById("MTForecast").checked;
     if(ForecastMT)
            {AddMT_Annotations();}
    else
        {chart1.getExtensions().remove(annMT);}    
     });

    

   var divHolder = document.getElementById('ChartDiv');
   chart1.create(divHolder); 

}

function GetXAxisPosition(date, chart1) {
    var covertedAxisDate = cfx.Chart.dateToDouble(date);
    for (var i = 0; i < chart1.getData().getPoints() ; i++) {
        var datefromData = chart1.getData().getX().getItem(-1, i);
        if (datefromData == covertedAxisDate) {
            return i;
        }
    }
}

</script>
 

OHLC_AAPL.js

[JuanC]

We consider tooltips a popup window that appears when you hover over a chart point/bar.

Can you describe exactly what you mean by "how to configure and display the tooltip on the top"?

If possible try to include diagrams or pictures to explain what you are looking for.

Regards,

JuanC

[Raj Patel]

2 hours ago, JuanC said:

We consider tooltips a popup window that appears when you hover over a chart point/bar.

Can you describe exactly what you mean by "how to configure and display the tooltip on the top"?

If possible try to include diagrams or pictures to explain what you are looking for.

Regards,

 

JuanC

 

At the moment it does not display any popup window. What I would I like to have as it appears in the picture below.  Change as hover over a chart.

[Raj Patel]

On 1/4/2018 at 1:34 PM, Raj Patel said:

At the moment it does not display any popup window. What I would I like to have as it appears in the picture below.  Change as hover over a chart.

Hello JuanC,

Is it possible to display the tooltip in the format i am trying to display?