Jump to content
JChartFX Community
  • 0
Raj Patel

Tooltip for Candle Chart

Question

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>
 

Jchart1.png

OHLC_AAPL.js

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
Share on other sites
  • 0
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.

Jchart1.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×