<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Getting technical indicator values</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<!-- jQuery is used to work with DOM -->
<script type="text/javascript" language="javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="./../js/AnyChartStock.js?v=1.9.0r9317"></script>
<!-- chart size settings -->
<style type="text/css">
#chartContainer {
width: 700px;
height: 550px;
float: left;
}
</style>
<script type="text/javascript" language="javascript">
// Creating new chart object.
var chart = new AnyChartStock("./../swf/AnyChartStock.swf?v=1.9.0r9317", "./../swf/Preloader.swf?v=1.9.0r9317");
// NOTE: needConfig flag set to true, provides an ability to work with chart objectModel
chart.needConfig = true;
// Setting XML config file.
chart.setXMLFile("config.xml");
// Writing the flash object into the page DOM.
chart.write("chartContainer");
var currentInfoTable; // table with current tech. indicator value
var currentIndicatorObject; // object used to turn tech indicators on and off
var showInfo; // link to function used to show tech indicators values
var indicatorChartId = "idMainChart"; // id of the chart where currently selected (shown) tech indicator is
var indicatorId = "idSMAIndicator"; // id of the currenly selected tech indicator
// on document ready
$(function() {
currentInfoTable = $("#infoSingleValue"); // SMA is selected by default
currentInfoTable.css("display",""); // show SMA table
});
// get currentIndicatorObject onChartRender
chart.onChartRender = function() {
currentIndicatorObject = chart.getTechIndicatorById(indicatorChartId,indicatorId); // get link to object that allows to turn on/off tech indicators or charts with tech indicators
showInfo = showSingleValueIndicatorInfo; // set function to show tech indicator details
// null onChartRender to avoid its further handling
// (applySettingsChanges causes onChartRender)
chart.onChartRender = null;
}
// showIndicatorSettings switches selected indicator
function showIndicatorSettings() {
currentInfoTable.css("display","none"); // hide table with details
currentIndicatorObject.enabled = false; // hide currently selected indicator
// null links
currentInfoTable = null;
currentIndicatorObject = null;
// depending on the selecttion:
switch ($("#idIndicatorList").val()) {
case "SMA":
currentIndicatorObject = chart.getTechIndicatorById("idMainChart", "idSMAIndicator"); // get link to SMA
currentInfoTable = $("#infoSingleValue"); // table to show SMA details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details in this case
indicatorChartId = "idMainChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idSMAIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "EMA":
currentIndicatorObject = chart.getTechIndicatorById("idMainChart", "idEMAIndicator"); // get link to EMA
currentInfoTable = $("#infoSingleValue"); // table to show EMA details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details in this case
indicatorChartId = "idMainChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idEMAIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "MFI":
currentIndicatorObject = chart.getChartById("idMfiIndicatorChart"); //get link to MFI indicator
currentInfoTable = $("#infoSingleValue"); // table to show MFI details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idMfiIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idMfiIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "RSI":
currentIndicatorObject = chart.getChartById("idRSIIndicatorChart"); // get link to RSI indicator
currentInfoTable = $("#infoSingleValue"); // table to show RSI details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idRSIIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idRSIIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "WilliamsR":
currentIndicatorObject = chart.getChartById("idWilliamsRIndicatorChart"); // get link to Williams %R indicator
currentInfoTable = $("#infoSingleValue"); // table to show Williams %R details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idWilliamsRIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idWilliamsRIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "Volume":
currentIndicatorObject = chart.getChartById("idVolumeIndicatorChart"); // get link to Volume indicator
currentInfoTable = $("#infoSingleValue"); // table to show Volume details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idVolumeIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idVolumeIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "PSAR":
currentIndicatorObject = chart.getTechIndicatorById("idMainChart", "idPSARIndicator"); // get link to PSAR
currentInfoTable = $("#infoSingleValue"); // table to show PSAR details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idMainChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idPSARIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "ROC":
currentIndicatorObject = chart.getChartById("idROCIndicatorChart"); // get link to ROC indicator
currentInfoTable = $("#infoSingleValue"); // table to show ROC details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idROCIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idROCIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "BBands":
currentIndicatorObject = chart.getTechIndicatorById("idMainChart", "idBBandsIndicator"); // get link to BBands
currentInfoTable = $("#infoTwoSeries"); //table to show BBands details - <table id="infoBBands" />
showInfo = showTwoSeriesIndicatorInfo; // showBBandsInfo is used to show details
indicatorChartId = "idMainChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idBBandsIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "MACD":
currentIndicatorObject = chart.getChartById("idMacdIndicatorChart"); // get link to MACD indicator
currentInfoTable = $("#infoMACD");// table to show MACD details - <table id="infoMACD" />
showInfo = showMACDInfo; // showMACDInfo is used to show details
indicatorChartId = "idMacdIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idMacdIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "StochasticOscillator":
currentIndicatorObject = chart.getChartById("idStochasticIndicatorChart"); // get link to Stochastic Oscillator indicator
currentInfoTable = $("#infoStochasticOscillator");//table to show Stochastic Oscillator details - <table id="infoStochasticOscillator" />
showInfo = showStochasticOscillatorInfo; // showStochasticOscillatorInfo is used to show details
indicatorChartId = "idStochasticIndicatorChart"; //id of the chart where indicator is (it is needed to show details)
indicatorId = "idStochasticOscillatorIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "VolumeMA":
currentIndicatorObject = chart.getChartById("idVolumeMAIndicatorChart"); // get link to Volume+MA indicator
currentInfoTable = $("#infoVolumeMA");// table to show Volume+MA details - <table id="infoVolumeMA" />
showInfo = showVolumeMAInfo; // showVolumeMAInfo is used to show details
indicatorChartId = "idVolumeMAIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idVolumeMAIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "ADL":
currentIndicatorObject = chart.getChartById("idADLIndicatorChart"); // get link to ADL indicator
currentInfoTable = $("#infoSingleValue"); // table to show ADL details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idADLIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idADLIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "Aroon":
currentIndicatorObject = chart.getChartById("idAroonIndicatorChart"); // get link to Aroon indicator
currentInfoTable = $("#infoAroon"); // table to show Aroon details - <table id="infoAroon" />
showInfo = showAroonIndicatorInfo; // showAroonIndicatorInfo is used to show details
indicatorChartId = "idAroonIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idAroonIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "ATR":
currentIndicatorObject = chart.getChartById("idATRIndicatorChart"); // get link to ATR indicator
currentInfoTable = $("#infoSingleValue"); // table to show ATR details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idATRIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idATRIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "BBandsB":
currentIndicatorObject = chart.getChartById("idBBandsBIndicatorChart"); // get link to BBandsB indicator
currentInfoTable = $("#infoSingleValue"); // table to show BBandsB details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idBBandsBIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idBBandsBIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "BBandsWidth":
currentIndicatorObject = chart.getChartById("idBBandsWidthIndicatorChart"); // get link to BBandsWidth indicator
currentInfoTable = $("#infoSingleValue"); // table to show BBandsWidth details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idBBandsWidthIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idBBandsWidthIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "KeltnerChannels":
currentIndicatorObject = chart.getTechIndicatorById("idMainChart", "idKeltnerChannelsIndicator"); // get link to KeltnerChannels indicator
currentInfoTable = $("#infoKeltnerChannels"); // table to show KeltnerChannels details - <table id="infoKeltnerChannels" />
showInfo = showKeltnerChannelsInfo; // showKeltnerChannelsInfo is used to show details
indicatorChartId = "idMainChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idKeltnerChannelsIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "MAEnvelopes":
currentIndicatorObject = chart.getTechIndicatorById("idMainChart", "idMAEnvelopesIndicator"); // get link to MAEnvelopes indicator
currentInfoTable = $("#infoTwoSeries"); // table to show MAEnvelopes details - <table id="infoTwoSeries" />
showInfo = showTwoSeriesIndicatorInfo; // showTwoSeriesIndicatorInfo is used to show details
indicatorChartId = "idMainChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idMAEnvelopesIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "Momentum":
currentIndicatorObject = chart.getChartById("idMomentumIndicatorChart"); // get link to Momentum indicator
currentInfoTable = $("#infoSingleValue"); // table to show Momentum details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idMomentumIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idMomentumIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "OBV":
currentIndicatorObject = chart.getChartById("idOBVIndicatorChart"); // get link to OBV indicator
currentInfoTable = $("#infoSingleValue"); // table to show OBV details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details
indicatorChartId = "idOBVIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idOBVIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "PriceChannels":
currentIndicatorObject = chart.getTechIndicatorById("idMainChart", "idPriceChannelsIndicator"); // get link to PriceChannels indicator
currentInfoTable = $("#infoPriceChannels"); // table to show PriceChannels details - <table id="infoPriceChannels" />
showInfo = showPriceChannelsInfo; // showPriceChannelsIndicatorInfo is used to show details
indicatorChartId = "idMainChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idPriceChannelsIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "TRIX":
currentIndicatorObject = chart.getChartById("idTRIXIndicatorChart"); // get link to TRIX indicator
currentInfoTable = $("#infoTRIX"); // table to show TRIX details - <table id="infoTRIX" />
showInfo = showTRIXIndicatorInfo; // showTRIXIndicatorInfo is used to show details
indicatorChartId = "idTRIXIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idTRIXIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "ChaikinOscillator":
currentIndicatorObject = chart.getChartById("idChaikinOscillatorIndicatorChart"); // get link to ChaikinOscillator
currentInfoTable = $("#infoSingleValue"); // table to show ChaikinOscillator details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details in this case
indicatorChartId = "idChaikinOscillatorIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idChaikinOscillatorIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "CMF":
currentIndicatorObject = chart.getChartById("idCMFIndicatorChart"); // get link to CMF
currentInfoTable = $("#infoSingleValue"); // table to show CMF details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details in this case
indicatorChartId = "idCMFIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idCMFIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "CCI":
currentIndicatorObject = chart.getChartById("idCCIIndicatorChart"); // get link to CCI
currentInfoTable = $("#infoSingleValue"); // table to show CCI details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details in this case
indicatorChartId = "idCCIIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idCCIIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "DMI":
currentIndicatorObject = chart.getChartById("idDMIIndicatorChart"); // get link to DMI
currentInfoTable = $("#infoDMI"); // table to show DMI details - <table id="infoDMI" />
showInfo = showDMIIndicatorInfo; // showDMIIndicatorInfo is used to show details in this case
indicatorChartId = "idDMIIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idDMIIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "ChaikinVolatility":
currentIndicatorObject = chart.getChartById("idCHVIndicatorChart"); // get link to ChaikinVolatility
currentInfoTable = $("#infoSingleValue"); // table to show ChaikinVolatility details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details in this case
indicatorChartId = "idCHVIndicatorChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idCHVIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "AMA":
currentIndicatorObject = chart.getTechIndicatorById("idMainChart", "idAMAIndicator"); // get link to AMA
currentInfoTable = $("#infoSingleValue"); // table to show AMA details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details in this case
indicatorChartId = "idMainChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idAMAIndicator"; // id of the technical indicator (it is needed to show details too)
break;
case "MMA":
currentIndicatorObject = chart.getTechIndicatorById("idMainChart", "idMMAIndicator"); // get link to MMA
currentInfoTable = $("#infoSingleValue"); // table to show MMA details - <table id="infoSingleValue" />
showInfo = showSingleValueIndicatorInfo; // showSingleValueIndicatorInfo is used to show details in this case
indicatorChartId = "idMainChart"; // id of the chart where indicator is (it is needed to show details)
indicatorId = "idMMAIndicator"; // id of the technical indicator (it is needed to show details too)
break;
}
if (currentInfoTable) // if there is a table to shows details - show it
currentInfoTable.css("display","");
if (currentIndicatorObject) // if there is an object with indicator or chart with indicator settings - set enabled = true to show it
currentIndicatorObject.enabled = true;
chart.applySettingsChanges(); // apply changes in object model
}
//--------------------------------------------------------------------------------
// Auxiliary Functions
//--------------------------------------------------------------------------------
// Rounding
function formatNumber(val) {
return Math.round(val * 100) / 100;
}
//--------------------------------------------------------------------------------
// Show Values Functions
//--------------------------------------------------------------------------------
/*
function used to show tech inidicators with one series (SMA, EMA, PSAR, MFI, ROC, RSI, Williams %R, Volume)
getTechnicalIndicatorValue() for such indicators returns:
{
series: {
current,
min,
max,
first,
last,
minVisible,
maxVisible,
firstVisible,
lastVisible
}
}
*/
function showSingleValueIndicatorInfo(showCurrent) {
var series = chart.getTechnicalIndicatorValue(indicatorChartId, indicatorId, true).series;
currentInfoTable.find(".current").html((showCurrent && series.current != undefined && !isNaN(series.current)) ? formatNumber(series.current) : "N/A");
currentInfoTable.find(".min").html(formatNumber(series.min));
currentInfoTable.find(".max").html(formatNumber(series.max));
currentInfoTable.find(".first").html(formatNumber(series.first));
currentInfoTable.find(".last").html(formatNumber(series.last));
currentInfoTable.find(".minVisible").html(formatNumber(series.minVisible));
currentInfoTable.find(".maxVisible").html(formatNumber(series.maxVisible));
currentInfoTable.find(".firstVisible").html(formatNumber(series.firstVisible));
currentInfoTable.find(".lastVisible").html(formatNumber(series.lastVisible));
}
/*
function to show Stochastic Oscillator detsils
getTechnicalIndicatorValue() in this case returns:
{
kSeries: {},
dSeries: {}
}
where kSeries and dSeries has structure identical with showSingleValueIndicatorInfo()
*/
function showStochasticOscillatorInfo(showCurrent) {
var info = chart.getTechnicalIndicatorValue(indicatorChartId, indicatorId, true);
var kSeries = info.kSeries;
var dSeries = info.dSeries;
currentInfoTable.find(".currentK").html((showCurrent && kSeries.current != undefined && !isNaN(kSeries.current)) ? formatNumber(kSeries.current) : "N/A");
currentInfoTable.find(".currentD").html((showCurrent && dSeries.current != undefined && !isNaN(dSeries.current)) ? formatNumber(dSeries.current) : "N/A");
currentInfoTable.find(".minK").html(formatNumber(kSeries.min));
currentInfoTable.find(".maxK").html(formatNumber(kSeries.max));
currentInfoTable.find(".firstK").html(formatNumber(kSeries.first));
currentInfoTable.find(".lastK").html(formatNumber(kSeries.last));
currentInfoTable.find(".minD").html(formatNumber(dSeries.min));
currentInfoTable.find(".maxD").html(formatNumber(dSeries.max));
currentInfoTable.find(".firstD").html(formatNumber(dSeries.first));
currentInfoTable.find(".lastD").html(formatNumber(dSeries.last));
currentInfoTable.find(".minVisibleK").html(formatNumber(kSeries.minVisible));
currentInfoTable.find(".maxVisibleK").html(formatNumber(kSeries.maxVisible));
currentInfoTable.find(".firstVisibleK").html(formatNumber(kSeries.firstVisible));
currentInfoTable.find(".lastVisibleK").html(formatNumber(kSeries.lastVisible));
currentInfoTable.find(".minVisibleD").html(formatNumber(dSeries.minVisible));
currentInfoTable.find(".maxVisibleD").html(formatNumber(dSeries.maxVisible));
currentInfoTable.find(".firstVisibleD").html(formatNumber(dSeries.firstVisible));
currentInfoTable.find(".lastVisibleD").html(formatNumber(dSeries.lastVisible));
}
/*
function to show Volume+MA details
getTechnicalIndicatorValue() for this indicator returns:
{
volumeSeries: {},
maSeries: {}
}
structure of volumeSeries and maSeries are identical to showSingleValueIndicatorInfo()
*/
function showVolumeMAInfo(showCurrent) {
var info = chart.getTechnicalIndicatorValue(indicatorChartId, indicatorId, true);
var volumeSeries = info.volumeSeries;
var maSeries = info.maSeries;
currentInfoTable.find(".currentVolume").html((showCurrent && volumeSeries.current != undefined && !isNaN(volumeSeries.current)) ? formatNumber(volumeSeries.current) : "N/A");
currentInfoTable.find(".currentMA").html((showCurrent && maSeries.current != undefined && !isNaN(maSeries.current)) ? formatNumber(maSeries.current) : "N/A");
currentInfoTable.find(".minVolume").html(formatNumber(volumeSeries.min));
currentInfoTable.find(".maxVolume").html(formatNumber(volumeSeries.max));
currentInfoTable.find(".firstVolume").html(formatNumber(volumeSeries.first));
currentInfoTable.find(".lastVolume").html(formatNumber(volumeSeries.last));
currentInfoTable.find(".minMA").html(formatNumber(maSeries.min));
currentInfoTable.find(".maxMA").html(formatNumber(maSeries.max));
currentInfoTable.find(".firstMA").html(formatNumber(maSeries.first));
currentInfoTable.find(".lastMA").html(formatNumber(maSeries.last));
currentInfoTable.find(".minVisibleVolume").html(formatNumber(volumeSeries.minVisible));
currentInfoTable.find(".maxVisibleVolume").html(formatNumber(volumeSeries.maxVisible));
currentInfoTable.find(".firstVisibleVolume").html(formatNumber(volumeSeries.firstVisible));
currentInfoTable.find(".lastVisibleVolume").html(formatNumber(volumeSeries.lastVisible));
currentInfoTable.find(".minVisibleMA").html(formatNumber(maSeries.minVisible));
currentInfoTable.find(".maxVisibleMA").html(formatNumber(maSeries.maxVisible));
currentInfoTable.find(".firstVisibleMA").html(formatNumber(maSeries.firstVisible));
currentInfoTable.find(".lastVisibleMA").html(formatNumber(maSeries.lastVisible));
}
/*
function to show indicator with two series details
getTechnicalIndicatorValue() for it returns:
{
upperSeries: {},
lowerSeries: {}
}
structure of upperSeries and lowerSeries are identical to showSingleValueIndicatorInfo()
*/
function showTwoSeriesIndicatorInfo(showCurrent) {
var info = chart.getTechnicalIndicatorValue(indicatorChartId, indicatorId, true);
var upperSeries = info.upperSeries;
var lowerSeries = info.lowerSeries;
currentInfoTable.find(".currentUpper").html((showCurrent && upperSeries.current != undefined && !isNaN(upperSeries.current)) ? formatNumber(upperSeries.current) : "N/A");
currentInfoTable.find(".currentLower").html((showCurrent && lowerSeries.current != undefined && !isNaN(lowerSeries.current)) ? formatNumber(lowerSeries.current) : "N/A");
currentInfoTable.find(".minUpper").html(formatNumber(upperSeries.min));
currentInfoTable.find(".maxUpper").html(formatNumber(upperSeries.max));
currentInfoTable.find(".firstUpper").html(formatNumber(upperSeries.first));
currentInfoTable.find(".lastUpper").html(formatNumber(upperSeries.last));
currentInfoTable.find(".minLower").html(formatNumber(lowerSeries.min));
currentInfoTable.find(".maxLower").html(formatNumber(lowerSeries.max));
currentInfoTable.find(".firstLower").html(formatNumber(lowerSeries.first));
currentInfoTable.find(".lastLower").html(formatNumber(lowerSeries.last));
currentInfoTable.find(".minVisibleUpper").html(formatNumber(upperSeries.minVisible));
currentInfoTable.find(".maxVisibleUpper").html(formatNumber(upperSeries.maxVisible));
currentInfoTable.find(".firstVisibleUpper").html(formatNumber(upperSeries.firstVisible));
currentInfoTable.find(".lastVisibleUpper").html(formatNumber(upperSeries.lastVisible));
currentInfoTable.find(".minVisibleLower").html(formatNumber(lowerSeries.minVisible));
currentInfoTable.find(".maxVisibleLower").html(formatNumber(lowerSeries.maxVisible));
currentInfoTable.find(".firstVisibleLower").html(formatNumber(lowerSeries.firstVisible));
currentInfoTable.find(".lastVisibleLower").html(formatNumber(lowerSeries.lastVisible));
}
/*
function to show Aroon indicator info
getTechnicalIndicatorValue() for it returns:
{
upSeries: {},
downSeries: {}
}
structure of upSeries and downSeries are identical to showSingleValueIndicatorInfo()
*/
function showAroonIndicatorInfo(showCurrent) {
var info = chart.getTechnicalIndicatorValue(indicatorChartId, indicatorId, true);
var upSeries = info.upSeries;
var downSeries = info.downSeries;
currentInfoTable.find(".currentUp").html((showCurrent && upSeries.current != undefined && !isNaN(upSeries.current)) ? formatNumber(upSeries.current) : "N/A");
currentInfoTable.find(".currentDown").html((showCurrent && downSeries.current != undefined && !isNaN(downSeries.current)) ? formatNumber(downSeries.current) : "N/A");
currentInfoTable.find(".minUp").html(formatNumber(upSeries.min));
currentInfoTable.find(".maxUp").html(formatNumber(upSeries.max));
currentInfoTable.find(".firstUp").html(formatNumber(upSeries.first));
currentInfoTable.find(".lastUp").html(formatNumber(upSeries.last));
currentInfoTable.find(".minDown").html(formatNumber(downSeries.min));
currentInfoTable.find(".maxDown").html(formatNumber(downSeries.max));
currentInfoTable.find(".firstDown").html(formatNumber(downSeries.first));
currentInfoTable.find(".lastDown").html(formatNumber(downSeries.last));
currentInfoTable.find(".minVisibleUp").html(formatNumber(upSeries.minVisible));
currentInfoTable.find(".maxVisibleUp").html(formatNumber(upSeries.maxVisible));
currentInfoTable.find(".firstVisibleUp").html(formatNumber(upSeries.firstVisible));
currentInfoTable.find(".lastVisibleUp").html(formatNumber(upSeries.lastVisible));
currentInfoTable.find(".minVisibleDown").html(formatNumber(downSeries.minVisible));
currentInfoTable.find(".maxVisibleDown").html(formatNumber(downSeries.maxVisible));
currentInfoTable.find(".firstVisibleDown").html(formatNumber(downSeries.firstVisible));
currentInfoTable.find(".lastVisibleDown").html(formatNumber(downSeries.lastVisible));
}
/*
function to show TRIX indicator details
getTechnicalIndicatorValue() for it returns:
{
seriesSeries: {},
signalSeries: {}
}
structure of seriesSeries and signalSeries are identical to showSingleValueIndicatorInfo()
*/
function showTRIXIndicatorInfo(showCurrent) {
var info = chart.getTechnicalIndicatorValue(indicatorChartId, indicatorId, true);
var seriesSeries = info.series;
var signalSeries = info.signalSeries;
currentInfoTable.find(".currentSeries").html((showCurrent && seriesSeries.current != undefined && !isNaN(seriesSeries.current)) ? formatNumber(seriesSeries.current) : "N/A");
currentInfoTable.find(".currentSignal").html((showCurrent && signalSeries.current != undefined && !isNaN(signalSeries.current)) ? formatNumber(signalSeries.current) : "N/A");
currentInfoTable.find(".minSeries").html(formatNumber(seriesSeries.min));
currentInfoTable.find(".maxSeries").html(formatNumber(seriesSeries.max));
currentInfoTable.find(".firstSeries").html(formatNumber(seriesSeries.first));
currentInfoTable.find(".lastSeries").html(formatNumber(seriesSeries.last));
currentInfoTable.find(".minSignal").html(formatNumber(signalSeries.min));
currentInfoTable.find(".maxSignal").html(formatNumber(signalSeries.max));
currentInfoTable.find(".firstSignal").html(formatNumber(signalSeries.first));
currentInfoTable.find(".lastSignal").html(formatNumber(signalSeries.last));
currentInfoTable.find(".minVisibleSeries").html(formatNumber(seriesSeries.minVisible));
currentInfoTable.find(".maxVisibleSeries").html(formatNumber(seriesSeries.maxVisible));
currentInfoTable.find(".firstVisibleSeries").html(formatNumber(seriesSeries.firstVisible));
currentInfoTable.find(".lastVisibleSeries").html(formatNumber(seriesSeries.lastVisible));
currentInfoTable.find(".minVisibleSignal").html(formatNumber(signalSeries.minVisible));
currentInfoTable.find(".maxVisibleSignal").html(formatNumber(signalSeries.maxVisible));
currentInfoTable.find(".firstVisibleSignal").html(formatNumber(signalSeries.firstVisible));
currentInfoTable.find(".lastVisibleSignal").html(formatNumber(signalSeries.lastVisible));
}
/*
function to show Keltner Channels indicator details
getTechnicalIndicatorValue() for it returns:
{
upperSeries: {},
lowerSeries: {},
emaSeries: {}
}
upperSeries, lowerSeries and emaSeries are identical to showSingleValueIndicatorInfo()
*/
function showKeltnerChannelsInfo(showCurrent) {
var info = chart.getTechnicalIndicatorValue(indicatorChartId, indicatorId, true);
var upperSeries = info.upperSeries;
var lowerSeries = info.lowerSeries;
var emaSeries = info.emaSeries;
currentInfoTable.find(".currentUpper").html((showCurrent && upperSeries.current != undefined && !isNaN(upperSeries.current)) ? formatNumber(upperSeries.current) : "N/A");
currentInfoTable.find(".minUpper").html(formatNumber(upperSeries.min));
currentInfoTable.find(".maxUpper").html(formatNumber(upperSeries.max));
currentInfoTable.find(".firstUpper").html(formatNumber(upperSeries.first));
currentInfoTable.find(".lastUpper").html(formatNumber(upperSeries.last));
currentInfoTable.find(".minVisibleUpper").html(formatNumber(upperSeries.minVisible));
currentInfoTable.find(".maxVisibleUpper").html(formatNumber(upperSeries.maxVisible));
currentInfoTable.find(".firstVisibleUpper").html(formatNumber(upperSeries.firstVisible));
currentInfoTable.find(".lastVisibleUpper").html(formatNumber(upperSeries.lastVisible));
currentInfoTable.find(".currentLower").html((showCurrent && lowerSeries.current != undefined && !isNaN(lowerSeries.current)) ? formatNumber(lowerSeries.current) : "N/A");
currentInfoTable.find(".minLower").html(formatNumber(lowerSeries.min));
currentInfoTable.find(".maxLower").html(formatNumber(lowerSeries.max));
currentInfoTable.find(".firstLower").html(formatNumber(lowerSeries.first));
currentInfoTable.find(".lastLower").html(formatNumber(lowerSeries.last));
currentInfoTable.find(".minVisibleLower").html(formatNumber(lowerSeries.minVisible));
currentInfoTable.find(".maxVisibleLower").html(formatNumber(lowerSeries.maxVisible));
currentInfoTable.find(".firstVisibleLower").html(formatNumber(lowerSeries.firstVisible));
currentInfoTable.find(".lastVisibleLower").html(formatNumber(lowerSeries.lastVisible));
currentInfoTable.find(".currentEMA").html((showCurrent && emaSeries.current != undefined && !isNaN(emaSeries.current)) ? formatNumber(emaSeries.current) : "N/A");
currentInfoTable.find(".minEMA").html(formatNumber(emaSeries.min));
currentInfoTable.find(".maxEMA").html(formatNumber(emaSeries.max));
currentInfoTable.find(".firstEMA").html(formatNumber(emaSeries.first));
currentInfoTable.find(".lastEMA").html(formatNumber(emaSeries.last));
currentInfoTable.find(".minVisibleEMA").html(formatNumber(emaSeries.minVisible));
currentInfoTable.find(".maxVisibleEMA").html(formatNumber(emaSeries.maxVisible));
currentInfoTable.find(".firstVisibleEMA").html(formatNumber(emaSeries.firstVisible));
currentInfoTable.find(".lastVisibleEMA").html(formatNumber(emaSeries.lastVisible));
}
/*
function to show Price Channels indicator details
getTechnicalIndicatorValue() for it returns:
{
upperSeries: {},
centerSeries: {},
lowerSeries: {}
}
upperSeries, centerSeries and lowerSeries are identical to showSingleValueIndicatorInfo()
*/
function showPriceChannelsInfo(showCurrent) {
var info = chart.getTechnicalIndicatorValue(indicatorChartId, indicatorId, true);
var upperSeries = info.upperSeries;
var centerSeries = info.centerSeries;
var lowerSeries = info.lowerSeries;
currentInfoTable.find(".currentUpper").html((showCurrent && upperSeries.current != undefined && !isNaN(upperSeries.current)) ? formatNumber(upperSeries.current) : "N/A");
currentInfoTable.find(".minUpper").html(formatNumber(upperSeries.min));
currentInfoTable.find(".maxUpper").html(formatNumber(upperSeries.max));
currentInfoTable.find(".firstUpper").html(formatNumber(upperSeries.first));
currentInfoTable.find(".lastUpper").html(formatNumber(upperSeries.last));
currentInfoTable.find(".minVisibleUpper").html(formatNumber(upperSeries.minVisible));
currentInfoTable.find(".maxVisibleUpper").html(formatNumber(upperSeries.maxVisible));
currentInfoTable.find(".firstVisibleUpper").html(formatNumber(upperSeries.firstVisible));
currentInfoTable.find(".lastVisibleUpper").html(formatNumber(upperSeries.lastVisible));
currentInfoTable.find(".currentCenter").html((showCurrent && centerSeries.current != undefined && !isNaN(centerSeries.current)) ? formatNumber(centerSeries.current) : "N/A");
currentInfoTable.find(".minCenter").html(formatNumber(centerSeries.min));
currentInfoTable.find(".maxCenter").html(formatNumber(centerSeries.max));
currentInfoTable.find(".firstCenter").html(formatNumber(centerSeries.first));
currentInfoTable.find(".lastCenter").html(formatNumber(centerSeries.last));
currentInfoTable.find(".minVisibleCenter").html(formatNumber(centerSeries.minVisible));
currentInfoTable.find(".maxVisibleCenter").html(formatNumber(centerSeries.maxVisible));
currentInfoTable.find(".firstVisibleCenter").html(formatNumber(centerSeries.firstVisible));
currentInfoTable.find(".lastVisibleCenter").html(formatNumber(centerSeries.lastVisible));
currentInfoTable.find(".currentLower").html((showCurrent && lowerSeries.current != undefined && !isNaN(lowerSeries.current)) ? formatNumber(lowerSeries.current) : "N/A");
currentInfoTable.find(".minLower").html(formatNumber(lowerSeries.min));
currentInfoTable.find(".maxLower").html(formatNumber(lowerSeries.max));
currentInfoTable.find(".firstLower").html(formatNumber(lowerSeries.first));
currentInfoTable.find(".lastLower").html(formatNumber(lowerSeries.last));
currentInfoTable.find(".minVisibleLower").html(formatNumber(lowerSeries.minVisible));
currentInfoTable.find(".maxVisibleLower").html(formatNumber(lowerSeries.maxVisible));
currentInfoTable.find(".firstVisibleLower").html(formatNumber(lowerSeries.firstVisible));
currentInfoTable.find(".lastVisibleLower").html(formatNumber(lowerSeries.lastVisible));
}
/*
function to show MACD details
getTechnicalIndicatorValue() for it returns:
{
macdSeries: {},
signalSeries: {},
histogramSeries: {}
}
macdSeries,signalSeries and histogramSeries are identical to showSingleValueIndicatorInfo()
*/
function showMACDInfo(showCurrent) {
var info = chart.getTechnicalIndicatorValue(indicatorChartId, indicatorId, true);
var macdSeries = info.macdSeries;
var signalSeries = info.signalSeries;
var histogramSeries = info.histogramSeries;
currentInfoTable.find(".currentMacd").html((showCurrent && macdSeries.current != undefined && !isNaN(macdSeries.current)) ? formatNumber(macdSeries.current) : "N/A");
currentInfoTable.find(".minMacd").html(formatNumber(macdSeries.min));
currentInfoTable.find(".maxMacd").html(formatNumber(macdSeries.max));
currentInfoTable.find(".firstMacd").html(formatNumber(macdSeries.first));
currentInfoTable.find(".lastMacd").html(formatNumber(macdSeries.last));
currentInfoTable.find(".minVisibleMacd").html(formatNumber(macdSeries.minVisible));
currentInfoTable.find(".maxVisibleMacd").html(formatNumber(macdSeries.maxVisible));
currentInfoTable.find(".firstVisibleMacd").html(formatNumber(macdSeries.firstVisible));
currentInfoTable.find(".lastVisibleMacd").html(formatNumber(macdSeries.lastVisible));
currentInfoTable.find(".currentSignal").html((showCurrent && signalSeries.current != undefined && !isNaN(signalSeries.current)) ? formatNumber(signalSeries.current) : "N/A");
currentInfoTable.find(".minSignal").html(formatNumber(signalSeries.min));
currentInfoTable.find(".maxSignal").html(formatNumber(signalSeries.max));
currentInfoTable.find(".firstSignal").html(formatNumber(signalSeries.first));
currentInfoTable.find(".lastSignal").html(formatNumber(signalSeries.last));
currentInfoTable.find(".minVisibleSignal").html(formatNumber(signalSeries.minVisible));
currentInfoTable.find(".maxVisibleSignal").html(formatNumber(signalSeries.maxVisible));
currentInfoTable.find(".firstVisibleSignal").html(formatNumber(signalSeries.firstVisible));
currentInfoTable.find(".lastVisibleSignal").html(formatNumber(signalSeries.lastVisible));
currentInfoTable.find(".currentHistogram").html((showCurrent && histogramSeries.current != undefined && !isNaN(histogramSeries.current)) ? formatNumber(histogramSeries.current) : "N/A");
currentInfoTable.find(".minHistogram").html(formatNumber(histogramSeries.min));
currentInfoTable.find(".maxHistogram").html(formatNumber(histogramSeries.max));
currentInfoTable.find(".firstHistogram").html(formatNumber(histogramSeries.first));
currentInfoTable.find(".lastHistogram").html(formatNumber(histogramSeries.last));
currentInfoTable.find(".minVisibleHistogram").html(formatNumber(histogramSeries.minVisible));
currentInfoTable.find(".maxVisibleHistogram").html(formatNumber(histogramSeries.maxVisible));
currentInfoTable.find(".firstVisibleHistogram").html(formatNumber(histogramSeries.firstVisible));
currentInfoTable.find(".lastVisibleHistogram").html(formatNumber(histogramSeries.lastVisible));
}
/*
function to show DMI indicator info
getTechnicalIndicatorValue() for it returns:
{
pdiSeries: {},
ndiSeries: {}
}
structure of pdiSeries and ndiSeries are identical to showSingleValueIndicatorInfo()
*/
function showDMIIndicatorInfo(showCurrent) {
var info = chart.getTechnicalIndicatorValue(indicatorChartId, indicatorId, true);
var pdiSeries = info.pdiSeries;
var ndiSeries = info.ndiSeries;
currentInfoTable.find(".currentUp").html((showCurrent && pdiSeries.current != undefined && !isNaN(pdiSeries.current)) ? formatNumber(pdiSeries.current) : "N/A");
currentInfoTable.find(".currentDown").html((showCurrent && ndiSeries.current != undefined && !isNaN(ndiSeries.current)) ? formatNumber(ndiSeries.current) : "N/A");
currentInfoTable.find(".minUp").html(formatNumber(pdiSeries.min));
currentInfoTable.find(".maxUp").html(formatNumber(pdiSeries.max));
currentInfoTable.find(".firstUp").html(formatNumber(pdiSeries.first));
currentInfoTable.find(".lastUp").html(formatNumber(pdiSeries.last));
currentInfoTable.find(".minDown").html(formatNumber(ndiSeries.min));
currentInfoTable.find(".maxDown").html(formatNumber(ndiSeries.max));
currentInfoTable.find(".firstDown").html(formatNumber(ndiSeries.first));
currentInfoTable.find(".lastDown").html(formatNumber(ndiSeries.last));
currentInfoTable.find(".minVisibleUp").html(formatNumber(pdiSeries.minVisible));
currentInfoTable.find(".maxVisibleUp").html(formatNumber(pdiSeries.maxVisible));
currentInfoTable.find(".firstVisibleUp").html(formatNumber(pdiSeries.firstVisible));
currentInfoTable.find(".lastVisibleUp").html(formatNumber(pdiSeries.lastVisible));
currentInfoTable.find(".minVisibleDown").html(formatNumber(ndiSeries.minVisible));
currentInfoTable.find(".maxVisibleDown").html(formatNumber(ndiSeries.maxVisible));
currentInfoTable.find(".firstVisibleDown").html(formatNumber(ndiSeries.firstVisible));
currentInfoTable.find(".lastVisibleDown").html(formatNumber(ndiSeries.lastVisible));
}
//--------------------------------------------------------------------------------
// Events handling
//--------------------------------------------------------------------------------
// onChartDraw event handler that will be set after the first draw
function onDrawHandler() {
showInfo(false);
};
// onSelectedRangeChange event handler
chart.onSelectedRangeChange = function() {
showInfo(false);
};
// onChartMouseOver event handler
chart.onChartMouseOver = function() {
showInfo(true);
};
// onChartMouseOut event handler
chart.onChartMouseOut = function() {
showInfo(false);
};
// onChartMouseMove event handler
chart.onChartMouseMove = function() {
showInfo(true);
};
//---------------------------------------------------------------------------------------------------
// html events binding
//---------------------------------------------------------------------------------------------------
$(function() {
$("#idIndicatorList").change(showIndicatorSettings);
});
//---------------------------------------------------------------------------------------------------
// Enable html controls
//---------------------------------------------------------------------------------------------------
chart.onChartDraw = function() {
$("#idIndicatorList").removeAttr("disabled");
chart.onChartDraw = onDrawHandler;
}
</script>
<!-- style info -->
<style type="text/css">
table.settings {
border-style: solid;
border-width: 1px;
border-color: #D0CDC9;
width: 400px;
}
table.settings tr th {
font:normal 60% Verdana;
background-color: #DCD9D5;
font-weight:bold;
padding-bottom:5px;
padding-top:5px;
padding-left:10px;
text-align:left;
}
table.settings tr td {
background-color: #F8F4F0;
font:normal 70% Verdana;
padding-bottom:2px;
padding-top:2px;
padding-left:10px;
text-align:left;
}
</style>
</head>
<body>
<div id="chartContainer"><!-- Chart Container --></div>
<div>
<!-- Tech. Indicator selector -->
<table class="settings">
<tr>
<th>Select Technical Indicator:</th>
</tr>
<tr>
<td>
<select id="idIndicatorList" autocomplete="off" disabled="disabled">
<option value="SMA" selected="true"> SMA </option>
<option value="EMA"> EMA </option>
<option value="BBands"> BBands </option>
<option value="PSAR"> PSAR </option>
<option value="MFI"> MFI </option>
<option value="ROC"> ROC </option>
<option value="RSI"> RSI </option>
<option value="WilliamsR"> WilliamsR </option>
<option value="MACD"> MACD </option>
<option value="StochasticOscillator"> StochasticOscillator </option>
<option value="Volume"> Volume </option>
<option value="VolumeMA"> VolumeMA </option>
<option value="ATR"> ATR </option>
<option value="OBV"> OBV </option>
<option value="Momentum"> Momentum </option>
<option value="KeltnerChannels"> KeltnerChannels </option>
<option value="MAEnvelopes"> MAEnvelopes </option>
<option value="PriceChannels"> PriceChannels </option>
<option value="ADL"> ADL </option>
<option value="Aroon"> Aroon </option>
<option value="TRIX"> TRIX </option>
<option value="BBandsWidth"> BBandsWidth </option>
<option value="BBandsB"> BBandsB </option>
<option value="ChaikinOscillator"> ChaikinOscillator </option>
<option value="CMF"> CMF </option>
<option value="CCI"> CCI </option>
<option value="DMI"> DMI </option>
<option value="ChaikinVolatility"> ChaikinVolatility </option>
<option value="AMA"> AMA </option>
<option value="MMA"> MMA </option>
</select>
</td>
</tr>
</table>
<!-- Any single value based indicator output table -->
<table class="settings" style="display:none" id="infoSingleValue">
<tr>
<th width="150">On mouse over values</th>
<th width="70">Value</th>
</tr>
<tr>
<td>Hovered Point:</td>
<td class="current"></td>
</tr>
<tr>
<th>Visible range info</th>
<th>Value</th>
</tr>
<tr>
<td>Min visible:</td>
<td class="minVisible"></td>
</tr>
<tr>
<td>Max visible:</td>
<td class="maxVisible"></td>
</tr>
<tr>
<td>First visible:</td>
<td class="firstVisible"></td>
</tr>
<tr>
<td>Last visible:</td>
<td class="lastVisible"></td>
</tr>
<tr>
<th>Full range info</th>
<th>Value</th>
</tr>
<tr>
<td>Min:</td>
<td class="min"></td>
</tr>
<tr>
<td>Max:</td>
<td class="max"></td>
</tr>
<tr>
<td>First:</td>
<td class="first"></td>
</tr>
<tr>
<td>Last:</td>
<td class="last"></td>
</tr>
</table>
<!-- Stochastic Oscillator output table -->
<table class="settings" style="display:none" id="infoStochasticOscillator">
<tr>
<th width="150">On mouse over values</th>
<th width="70">%K</th>
<th width="70">%D</th>
</tr>
<tr>
<td>Hovered Point:</td>
<td class="currentK"></td>
<td class="currentD"></td>
</tr>
<tr>
<th>Visible range info</th>
<th>%K</th>
<th>%D</th>
</tr>
<tr>
<td>Min visible:</td>
<td class="minVisibleK"></td>
<td class="minVisibleD"></td>
</tr>
<tr>
<td>Max visible:</td>
<td class="maxVisibleK"></td>
<td class="maxVisibleD"></td>
</tr>
<tr>
<td>First visible:</td>
<td class="firstVisibleK"></td>
<td class="firstVisibleD"></td>
</tr>
<tr>
<td>Last visible:</td>
<td class="lastVisibleK"></td>
<td class="lastVisibleD"></td>
</tr>
<tr>
<th>Full range info</th>
<th>%K</th>
<th>%D</th>
</tr>
<tr>
<td>Min:</td>
<td class="minK"></td>
<td class="minD"></td>
</tr>
<tr>
<td>Max:</td>
<td class="maxK"></td>
<td class="maxD"></td>
</tr>
<tr>
<td>First:</td>
<td class="firstK"></td>
<td class="firstD"></td>
</tr>
<tr>
<td>Last:</td>
<td class="lastK"></td>
<td class="lastD"></td>
</tr>
</table>
<!-- Volume+MA output table -->
<table class="settings" style="display:none" id="infoVolumeMA">
<tr>
<th width="150">On mouse over values</th>
<th width="70">Volume</th>
<th width="70">MA</th>
</tr>
<tr>
<td>Hovered Point:</td>
<td class="currentVolume"></td>
<td class="currentMA"></td>
</tr>
<tr>
<th>Visible range info</th>
<th>Volume</th>
<th>MA</th>
</tr>
<tr>
<td>Min visible:</td>
<td class="minVisibleVolume"></td>
<td class="minVisibleMA"></td>
</tr>
<tr>
<td>Max visible:</td>
<td class="maxVisibleVolume"></td>
<td class="maxVisibleMA"></td>
</tr>
<tr>
<td>First visible:</td>
<td class="firstVisibleVolume"></td>
<td class="firstVisibleMA"></td>
</tr>
<tr>
<td>Last visible:</td>
<td class="lastVisibleVolume"></td>
<td class="lastVisibleMA"></td>
</tr>
<tr>
<th>Full range info</th>
<th>Volume</th>
<th>MA</th>
</tr>
<tr>
<td>Min:</td>
<td class="minVolume"></td>
<td class="minMA"></td>
</tr>
<tr>
<td>Max:</td>
<td class="maxVolume"></td>
<td class="maxMA"></td>
</tr>
<tr>
<td>First:</td>
<td class="firstVolume"></td>
<td class="firstMA"></td>
</tr>
<tr>
<td>Last:</td>
<td class="lastVolume"></td>
<td class="lastMA"></td>
</tr>
</table>
<!-- Two series indicators output table -->
<table class="settings" style="display:none" id="infoTwoSeries">
<tr>
<th width="150">On mouse over values</th>
<th width="70">Upper</th>
<th width="70">Lower</th>
</tr>
<tr>
<td>Hovered Point:</td>
<td class="currentUpper"></td>
<td class="currentLower"></td>
</tr>
<tr>
<th>Visible range info</th>
<th>Upper</th>
<th>Lower</th>
</tr>
<tr>
<td>Min visible:</td>
<td class="minVisibleUpper"></td>
<td class="minVisibleLower"></td>
</tr>
<tr>
<td>Max visible:</td>
<td class="maxVisibleUpper"></td>
<td class="maxVisibleLower"></td>
</tr>
<tr>
<td>First visible:</td>
<td class="firstVisibleUpper"></td>
<td class="firstVisibleLower"></td>
</tr>
<tr>
<td>Last visible:</td>
<td class="lastVisibleUpper"></td>
<td class="lastVisibleLower"></td>
</tr>
<tr>
<th>Full range info</th>
<th>Upper</th>
<th>Lower</th>
</tr>
<tr>
<td>Min:</td>
<td class="minUpper"></td>
<td class="minLower"></td>
</tr>
<tr>
<td>Max:</td>
<td class="maxUpper"></td>
<td class="maxLower"></td>
</tr>
<tr>
<td>First:</td>
<td class="firstUpper"></td>
<td class="firstLower"></td>
</tr>
<tr>
<td>Last:</td>
<td class="lastUpper"></td>
<td class="lastLower"></td>
</tr>
</table>
<!-- KeltnerChannels output table -->
<table class="settings" style="display:none" id="infoKeltnerChannels">
<tr>
<th width="150">On mouse over values</th>
<th width="70">Upper</th>
<th width="70">Lower</th>
<th width="70">EMA</th>
</tr>
<tr>
<td>Hovered Point:</td>
<td class="currentUpper"></td>
<td class="currentLower"></td>
<td class="currentEMA"></td>
</tr>
<tr>
<th>Visible range info</th>
<th>Upper</th>
<th>Lower</th>
<th>EMA</th>
</tr>
<tr>
<td>Min visible:</td>
<td class="minVisibleUpper"></td>
<td class="minVisibleLower"></td>
<td class="minVisibleEMA"></td>
</tr>
<tr>
<td>Max visible:</td>
<td class="maxVisibleUpper"></td>
<td class="maxVisibleLower"></td>
<td class="maxVisibleEMA"></td>
</tr>
<tr>
<td>First visible:</td>
<td class="firstVisibleUpper"></td>
<td class="firstVisibleLower"></td>
<td class="firstVisibleEMA"></td>
</tr>
<tr>
<td>Last visible:</td>
<td class="lastVisibleUpper"></td>
<td class="lastVisibleLower"></td>
<td class="lastVisibleEMA"></td>
</tr>
<tr>
<th>Full range info</th>
<th>Upper</th>
<th>Lower</th>
<th>EMA</th>
</tr>
<tr>
<td>Min:</td>
<td class="minUpper"></td>
<td class="minLower"></td>
<td class="minEMA"></td>
</tr>
<tr>
<td>Max:</td>
<td class="maxUpper"></td>
<td class="maxLower"></td>
<td class="maxEMA"></td>
</tr>
<tr>
<td>First:</td>
<td class="firstUpper"></td>
<td class="firstLower"></td>
<td class="firstEMA"></td>
</tr>
<tr>
<td>Last:</td>
<td class="lastUpper"></td>
<td class="lastLower"></td>
<td class="lastEMA"></td>
</tr>
</table>
<!-- PriceChannels output table -->
<table class="settings" style="display:none" id="infoPriceChannels">
<tr>
<th width="150">On mouse over values</th>
<th width="70">Upper</th>
<th width="70">Center</th>
<th width="70">Lower</th>
</tr>
<tr>
<td>Hovered Point:</td>
<td class="currentUpper"></td>
<td class="currentCenter"></td>
<td class="currentLower"></td>
</tr>
<tr>
<th>Visible range info</th>
<th>Upper</th>
<th>Center</th>
<th>Lower</th>
</tr>
<tr>
<td>Min visible:</td>
<td class="minVisibleUpper"></td>
<td class="minVisibleCenter"></td>
<td class="minVisibleLower"></td>
</tr>
<tr>
<td>Max visible:</td>
<td class="maxVisibleUpper"></td>
<td class="maxVisibleCenter"></td>
<td class="maxVisibleLower"></td>
</tr>
<tr>
<td>First visible:</td>
<td class="firstVisibleUpper"></td>
<td class="firstVisibleCenter"></td>
<td class="firstVisibleLower"></td>
</tr>
<tr>
<td>Last visible:</td>
<td class="lastVisibleUpper"></td>
<td class="lastVisibleCenter"></td>
<td class="lastVisibleLower"></td>
</tr>
<tr>
<th>Full range info</th>
<th>Upper</th>
<th>Center</th>
<th>Lower</th>
</tr>
<tr>
<td>Min:</td>
<td class="minUpper"></td>
<td class="minCenter"></td>
<td class="minLower"></td>
</tr>
<tr>
<td>Max:</td>
<td class="maxUpper"></td>
<td class="maxCenter"></td>
<td class="maxLower"></td>
</tr>
<tr>
<td>First:</td>
<td class="firstUpper"></td>
<td class="firstCenter"></td>
<td class="firstLower"></td>
</tr>
<tr>
<td>Last:</td>
<td class="lastUpper"></td>
<td class="lastCenter"></td>
<td class="lastLower"></td>
</tr>
</table>
<!-- Aroon output table -->
<table class="settings" style="display:none" id="infoAroon">
<tr>
<th width="150">On mouse over values</th>
<th width="70">Up</th>
<th width="70">Down</th>
</tr>
<tr>
<td>Hovered Point:</td>
<td class="currentUp"></td>
<td class="currentDown"></td>
</tr>
<tr>
<th>Visible range info</th>
<th>Up</th>
<th>Down</th>
</tr>
<tr>
<td>Min visible:</td>
<td class="minVisibleUp"></td>
<td class="minVisibleDown"></td>
</tr>
<tr>
<td>Max visible:</td>
<td class="maxVisibleUp"></td>
<td class="maxVisibleDown"></td>
</tr>
<tr>
<td>First visible:</td>
<td class="firstVisibleUp"></td>
<td class="firstVisibleDown"></td>
</tr>
<tr>
<td>Last visible:</td>
<td class="lastVisibleUp"></td>
<td class="lastVisibleDown"></td>
</tr>
<tr>
<th>Full range info</th>
<th>Up</th>
<th>Down</th>
</tr>
<tr>
<td>Min:</td>
<td class="minUp"></td>
<td class="minDown"></td>
</tr>
<tr>
<td>Max:</td>
<td class="maxUp"></td>
<td class="maxDown"></td>
</tr>
<tr>
<td>First:</td>
<td class="firstUp"></td>
<td class="firstDown"></td>
</tr>
<tr>
<td>Last:</td>
<td class="lastUp"></td>
<td class="lastDown"></td>
</tr>
</table>
<!-- TRIX output table -->
<table class="settings" style="display:none" id="infoTRIX">
<tr>
<th width="150">On mouse over values</th>
<th width="70">Series</th>
<th width="70">Signal</th>
</tr>
<tr>
<td>Hovered Point:</td>
<td class="currentSeries"></td>
<td class="currentSignal"></td>
</tr>
<tr>
<th>Visible range info</th>
<th>Series</th>
<th>Signal</th>
</tr>
<tr>
<td>Min visible:</td>
<td class="minVisibleSeries"></td>
<td class="minVisibleSignal"></td>
</tr>
<tr>
<td>Max visible:</td>
<td class="maxVisibleSeries"></td>
<td class="maxVisibleSignal"></td>
</tr>
<tr>
<td>First visible:</td>
<td class="firstVisibleSeries"></td>
<td class="firstVisibleSignal"></td>
</tr>
<tr>
<td>Last visible:</td>
<td class="lastVisibleSeries"></td>
<td class="lastVisibleSignal"></td>
</tr>
<tr>
<th>Full range info</th>
<th>Series</th>
<th>Signal</th>
</tr>
<tr>
<td>Min:</td>
<td class="minSeries"></td>
<td class="minSignal"></td>
</tr>
<tr>
<td>Max:</td>
<td class="maxSeries"></td>
<td class="maxSignal"></td>
</tr>
<tr>
<td>First:</td>
<td class="firstSeries"></td>
<td class="firstSignal"></td>
</tr>
<tr>
<td>Last:</td>
<td class="lastSeries"></td>
<td class="lastSignal"></td>
</tr>
</table>
<!-- DMI output table -->
<table class="settings" style="display:none" id="infoDMI">
<tr>
<th width="150">On mouse over values</th>
<th width="70">+DI</th>
<th width="70">-DI</th>
</tr>
<tr>
<td>Hovered Point:</td>
<td class="currentUp"></td>
<td class="currentDown"></td>
</tr>
<tr>
<th>Visible range info</th>
<th>+DI</th>
<th>-DI</th>
</tr>
<tr>
<td>Min visible:</td>
<td class="minVisibleUp"></td>
<td class="minVisibleDown"></td>
</tr>
<tr>
<td>Max visible:</td>
<td class="maxVisibleUp"></td>
<td class="maxVisibleDown"></td>
</tr>
<tr>
<td>First visible:</td>
<td class="firstVisibleUp"></td>
<td class="firstVisibleDown"></td>
</tr>
<tr>
<td>Last visible:</td>
<td class="lastVisibleUp"></td>
<td class="lastVisibleDown"></td>
</tr>
<tr>
<th>Full range info</th>
<th>+DI</th>
<th>-DI</th>
</tr>
<tr>
<td>Min:</td>
<td class="minUp"></td>
<td class="minDown"></td>
</tr>
<tr>
<td>Max:</td>
<td class="maxUp"></td>
<td class="maxDown"></td>
</tr>
<tr>
<td>First:</td>
<td class="firstUp"></td>
<td class="firstDown"></td>
</tr>
<tr>
<td>Last:</td>
<td class="lastUp"></td>
<td class="lastDown"></td>
</tr>
</table>
<!-- MACD output table -->
<table class="settings" style="display:none" id="infoMACD">
<tr>
<th width="150">On mouse over values</th>
<th width="70">MACD</th>
<th width="70">Signal</th>
<th width="70">Histogram</th>
</tr>
<tr>
<td>Hovered Point:</td>
<td class="currentMacd"></td>
<td class="currentSignal"></td>
<td class="currentHistogram"></td>
</tr>
<tr>
<th>Visible range info</th>
<th>MACD</th>
<th>Signal</th>
<th>Histogram</th>
</tr>
<tr>
<td>Min visible:</td>
<td class="minVisibleMacd"></td>
<td class="minVisibleSignal"></td>
<td class="minVisibleHistogram"></td>
</tr>
<tr>
<td>Max visible:</td>
<td class="maxVisibleMacd"></td>
<td class="maxVisibleSignal"></td>
<td class="maxVisibleHistogram"></td>
</tr>
<tr>
<td>First visible:</td>
<td class="firstVisibleMacd"></td>
<td class="firstVisibleSignal"></td>
<td class="firstVisibleHistogram"></td>
</tr>
<tr>
<td>Last visible:</td>
<td class="lastVisibleMacd"></td>
<td class="lastVisibleSignal"></td>
<td class="lastVisibleHistogram"></td>
</tr>
<tr>
<th>Full range info</th>
<th>MACD</th>
<th>Signal</th>
<th>Histogram</th>
</tr>
<tr>
<td>Min:</td>
<td class="minMacd"></td>
<td class="minSignal"></td>
<td class="minHistogram"></td>
</tr>
<tr>
<td>Max:</td>
<td class="maxMacd"></td>
<td class="maxSignal"></td>
<td class="maxHistogram"></td>
</tr>
<tr>
<td>First:</td>
<td class="firstMacd"></td>
<td class="firstSignal"></td>
<td class="firstHistogram"></td>
</tr>
<tr>
<td>Last:</td>
<td class="lastMacd"></td>
<td class="lastSignal"></td>
<td class="lastHistogram"></td>
</tr>
</table>
</div>
</body>
</html>Sample Description
How to use this sample?
Use combobox to select technical indicator to be shown on the chart and then move the mouse over the chart to see all available technical indicator values details.
How it works
This sample shows how to obtain actual technical indicator data via JavaScript API. onChartMouseMove, onChartMouseOut, onChartMouseOver, onChartDraw are handled and getTechnicalIndicatorValue is used to obtain the value of all series technical indicator consists of.
To understand everything about obtaining actual chart data refer to Obtaining Actual Chart Information article.
AnyChartStock JavaScript API
This sample uses the following methods, properties and events from AnyChartStock JavaScript API:
| Item | Type | Description |
|---|---|---|
| needConfig | Property (Boolean) | Defines whether the access to full chart configuration object model is required. |
| applySettingsChanges | Method | Commits changes made to settings element of the objectModel. |
| getChartById | Method | Returns link to a chart object in the objectModel. |
| getTechIndicatorById | Method | Gets the link to technical indicator object by its id. |
| getTechnicalIndicatorValue | Method | Gets info about technical indicator value. |
| setXMLFile | Method | Sets chart XML configuration file path. |
| write | Method | Adds the chart to HTML DOM as a child of the specified container. |
| onChartDraw | Event | This event is dispatched when the AnyChart Stock is drawn. |
| onChartMouseMove | Event | This event is dispatched when the mouse is moving over the chart plotting area. |
| onChartMouseOut | Event | This event is dispatched when the mouse leaves the chart plotting area. |
| onChartMouseOver | Event | This event is dispatched when the chart plotting area is hovered by the mouse. |
| onSelectedRangeChange | Event | This event is dispatched when the selected range of the chart is changed. |
Prerequisites
This section lists all configuration, data and auxiliary files required for this sample.
Configuration file
CSV files
SWF files
- AnyChartStock.swf - AnyChart Stock component.
- Preloader.swf - AnyChart Stock helper component that loads the main component (AnyChartStock.swf) and displays loading progress.
JavaScript Libraries
- jquery.min.js - A JavaScript jQuery library. Learn more at jQuery official site.
- AnyChartStock.js - A JavaScript library that is shipped with AnyChart Stock component. It is used to embed the component into HTML DOM and to comunicate with the Flash part.
The information contained in this website is for general information purposes only. All sample data provided on this site is for demonstration purposes only.
The logos and names of other companies and products mentioned on this site are copyright and/or trademarks of their respective owners.
The content on this site, including news, quotes, data and other information, is provided for your personal information only, and is intended for demonstration purposes only. Content on this site is not appropriate for the purposes of making a decision to carry out a transaction or trade. Nor does it provide any form of advice (investment, tax, legal) amounting to investment advice, or make any recommendations regarding particular financial instruments, investments or products.
In no event AnyChart will be liable for any loss or damage including without limitation, indirect or consequential loss or damage, or any loss or damage whatsoever arising from loss of data or profits arising out of, or in connection with, the use of this website.
This site may point to other Internet sites that may be of interest to you, however AnyChart does not endorse or take responsibility for the content on such other sites
Market data and News provided by and copyright RediNews, Incorporated.