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