Highcharts.setOptions({lang :{
rangeSelectorZoom : "",
/*rangeSelectorFrom : "",
rangeSelectorTo : "",*/
}});
$(document).ajaxStart(function() {
$(underlyingChart.loadingContainer).show();
});
$(document).ajaxStop(function() {
$(underlyingChart.loadingContainer).hide();
});
$(window).on('resize.underlyingChart', function(e) {
//console.log('resize');
underlyingChart.updateSeriesPosition();
underlyingChart.chart.reflow();
$('.highcharts-crosshair ').css('visibility','hidden');
//$.each(underlyingChart.emptySlot, function(index, value){
underlyingChart.drawEmptyBackground();
//});
});
var underlyingChart = {
chart : null,
cur_chart : null,
data : null,
period: 0,
emptySlot:["","","","","",""],
usedSlot : ["","","","","",""],
usedMASlot : ["","","","",""],
//maColors : ["#61A1C6","#a1af00","#82389b","#e60028","#fbc189"],
maColors : ["#F48B28","#FF68D3","#00DEBB","#9FA1F3","#BC6BC6"],
maIndex : {10: 0, 20: 1, 50: 2, 100:3, 250:4},
maIndex2 : [10,20,50,100,250],
navigatorUpdated : null,
toolTipMoved : null,
selectedRange : [-1,-1],
stockcode: "",
comparecode : "",
backgroundColor: "",
selected_ts:0,
loadingContainer:null,
charttype: "candlestick",
lastTooltipPoint:null,
isMobile: ($(".mobile_header").is(":hidden"))?false:true,
mobileHeight:{true:85, false:100},
mobileTop:{true:30, false:0},
lastObj: null,
isFx: 0,
isUS: 0,
init : function(code, callback, navUpdated, ttMoved){
var self = this;
var delay = (typeof isSameOrigin !== "undefined" && isSameOrigin*1 == 0)? '/delay/1': '';
self.navigatorUpdated = (navUpdated!==undefined)?navUpdated:null;
self.toolTipMoved = (ttMoved!==undefined)?ttMoved:null;
$.getJSON('/'+lang+'/data/chart/underlyingChart/code/'+code+'/period/'+self.period + delay, function(_data) {
self.data = self.decode(_data);
var htmlContainer = null;
if ($('#underlyingChartContainer .highcharts-html-container').length>0){
htmlContainer = $('#underlyingChartContainer .highcharts-html-container');
}
self.stockcode = code;
self.fdate = _data.mainData.fdate;
self.edate = _data.mainData.edate;
self.isFx = _data.mainData.isFx;
self.isUS = _data.mainData.isUS;
$('#underlyingChartContainer').highcharts('StockChart',self.getJSON(self.data), function (chart){
if ($(chart.renderTo).attr("id")){
if (!$('#underlyingChartContainer').hasClass("noSetting")){
if (htmlContainer){
$('#underlyingChartContainer').append(htmlContainer);
}else{
$('#underlyingChartContainer').append("
");
$('#underlyingChartContainer .highcharts-html-container').append("");
self.loadingContainer = $('#underlyingChartContainer .highcharts-html-container .highcharts-loading');
}
}
self.chart = chart;
self.cur_chart = chart;
self.drawBackground();
if(type!="index"){
self.setPeriod(self.data.last[self.data.last.length-1][0]- (60*60*24*1000)*365,self.data.last[self.data.last.length-1][0]);
}else{
self.setPeriod(self.data.last[self.data.last.length-1][0]- (60*60*24*1000)*365+(60*60*24*1000)*183,self.data.last[self.data.last.length-1][0]);
}
self.changeChartType(self.charttype);
if (callback){
callback();
}
$("#startDay, #endDay").datepicker({
dateFormat: 'yy-mm-dd',
minDate: self.fdate,
maxDate: self.edate
});
$("#startDay, #endDay").change(function(){
var startDay = $("#startDay").val();
var endDay = $("#endDay").val();
if(startDay!="" && endDay!=""){
self.setPeriod(Date.parse(startDay),Date.parse(endDay));
}
});
}else{
chart.reflow();
}
});
});
},
decode : function(_data){
var data = _data.mainData.underlying;
var ohlc = [], volume = [],turnover = [],last = [], recommData = [];
for (i = 0; i < data.length; i++) {
ohlc.push({
x: data[i].ts,
y: data[i].last,
high: data[i].high,
low: data[i].low,
open: data[i].open,
close: data[i].last,
});
last.push([
data[i].ts, // the date
data[i].last // close
]);
volume.push([
data[i].ts, // the date
data[i].vol // the volume
]);
turnover.push([
data[i].ts, // the date
data[i].turnover // the turnover
]);
}
for(var i = 0; i < _data.recommData.length; i++){
let y;
if(_data.recommData.length>1){
if(i == 0){
y = (_data.recommData[i].value*1 > _data.recommData[i+1].value*1) ? -10 : 11;
}else{
y = (_data.recommData[i].value*1 > _data.recommData[i-1].value*1) ? -10 : 11;
}
}else{
y = -10;
}
recommData.push({
//properties for plotlines
className: "recomm",
width: 2,
value: _data.recommData[i].value*1,
//color: "#ed8b00", //line color
color: _data.recommData[i].wtypeValue.toLowerCase() == 'call'? "#4D7AA7": "#ed8b00",
zIndex: 4,
label:{
useHTML: true,
text: '',
y: y,
x: 0,
style: {
color: 'white',
}
},
//properties for hover tooltip
uname: _data.recommData[i].uname,
code: _data.recommData[i].code,
wtype: _data.recommData[i].wtype,
egearing: _data.recommData[i].egearing,
mdate: _data.recommData[i].mdate,
wtypeValue: _data.recommData[i].wtypeValue,
});
}
return {ohlc : ohlc, vol:volume, turnover: turnover, last:last, recommData: recommData,};
},
options : {
groupingUnits : [['day',[1]],],
chartHeight : 270,
chartTop : 23,
subChartTitle : 23,
},
getJSON : function(data){
var self = this;
return {
chart : {
animation: false,
renderTo: 'underlyingChartContainer',
backgroundColor : (self.toolTipMoved !=null)?"rgba(255, 255, 255, 0.0)":"#FFFFFF",
marginLeft: 0,
marginRight: 70,
marginTop: this.options.chartTop,
events: {
load: function(){
if (this == self.chart){
//self.refreshSeries();
}else{
//console.log("load: copy");
self.cur_chart = this;
//self.refreshSeries();
setTimeout(function(){ self.cur_chart = self.chart; }, 100);
}
},
redraw: function(event) {
if ((self.selectedRange[0]!=event.target.xAxis[0].min || self.selectedRange[1]!=event.target.xAxis[0].max) || (self.selectedRange[0]==-1 && self.selectedRange[1]==-1)){
//console.log("redraw",self.navigatorUpdated);
self.selectedRange[0] = event.target.xAxis[0].min;
self.selectedRange[1] = event.target.xAxis[0].max;
if (self.navigatorUpdated){
self.navigatorUpdated(event.target.xAxis[0].min,event.target.xAxis[0].max);
}
}
},
click: function(event) {
$('.highcharts-crosshair').css('visibility','visible');
}
}
},
annotationsOptions: {
enabled: true,
noButtons: true,
/*buttonsElementId: "underlyingMasterTools",*/
},
exporting: {
enabled: false,
/*url: "http://hsbc2.dbpower.com.hk/highchart_export/export.php",*/
},
plotOptions: {
candlestick: {
oxymoronic: true,
color: '#e60028',
lineColor: '#e60028',
upColor: '#1a9656',
upLineColor: '#1a9656'
},
area: {
threshold: null,
},
series: {
turboThreshold: 2000,
states:{
hover: {
enabled: false,
}
}
}
},
tooltip: {
backgroundColor: "rgba(0,0,0,0)",
borderWidth: 0,
borderRadius: 0,
useHTML: true,
positioner: function(width, height, point){
var pos = this.getPosition(width, height, point);
if (self.lastTooltipPoint && self.lastTooltipPoint.series.type == "line"){
var _point = self.lastTooltipPoint.point;
pos.y = _point.plotY;
}
return pos;
},
formatter : function(){
self.drawToolTip(this,false);
if (underlyingChart.chart.annotations.selected > 0){
return "";
}
var html = '';
var tooltipHead;
if($("#underlyingChartContainer .recomProduct:hover").length == 1){
let hoverEle = $("#underlyingChartContainer .recomProduct:hover");
let hoverCode = hoverEle.attr("value");
$.each( data.recommData, function(key) {
//console.log(data.recommData[key].code );
let recommCode = data.recommData[key].code;
let wtypeStr = data.recommData[key].wtype;
if(recommCode == hoverCode){
//恒指認購證12345
let spacer = "";
if(lang == "en_hk"){
spacer = " ";
}
tooltipHead = data.recommData[key].uname + spacer + wtypeStr + " " + recommCode;
let valueName, egearingName;
if(data.recommData[key].wtypeValue == "CALL" || data.recommData[key].wtypeValue == "PUT"){
valueName = self.labels()[lang].strike;
egearingName = self.labels()[lang].egearing;
}else{
valueName = self.labels()[lang].calllv;
egearingName = self.labels()[lang].gearing;
}
html += ''+ valueName +'' + data.recommData[key].value + '
';
html += ''+ self.labels()[lang].maturity +'' + data.recommData[key].mdate + '
';
html += ''+ egearingName +'' + data.recommData[key].egearing + '
';
}
});
}else{
if (Highcharts.dateFormat('%H:%M', this.points[0].x) != "00:00"){
tooltipHead = Highcharts.dateFormat('%Y-%m-%d %H:%M', this.points[0].x);
}else{
tooltipHead = Highcharts.dateFormat('%Y-%m-%d', this.points[0].x);
}
if (this.points[0].series.type == "line"){
self.lastTooltipPoint = this.points[0];
html += ''+self.labels()[lang].toolTip.underlyinglast+''+this.points[0].y+" ";
}else{
self.lastTooltipPoint = null;
html += ''+self.labels()[lang].toolTip.underlyinghigh+''+this.points[0].point.high+"
";
html += ''+self.labels()[lang].toolTip.underlyinglow+''+this.points[0].point.low+"
";
html += ''+self.labels()[lang].toolTip.underlyingopen+''+this.points[0].point.open+"
";
html += ''+self.labels()[lang].toolTip.underlyinglast+''+this.points[0].point.close+"
";
}
var k=3;
for(var i =0; i0){
if (self.usedMASlot[i].indexOf("_bol-")>0){
while(_index>0 && typeof this.points[_index].point.high == "undefined"){
_index--;
}
var val = formatPrice(this.points[_index+1].y);
var _val1 = formatPrice(this.points[_index].point.high);
var _val2 = formatPrice(this.points[_index].point.low);
html += ''+self.labels()[lang].toolTip.MASlot[5][0]+'';
html += ''+val+"
";
html += ''+self.labels()[lang].toolTip.MASlot[5][2]+'';
html += ''+_val2+"
";
html += ''+self.labels()[lang].toolTip.MASlot[5][1]+'';
html += ''+_val1+"
";
}else if(self.usedMASlot[i].indexOf("_compare")>0){
var val = formatPrice(this.points[_index].y);
html += ''+self.labels()[lang].toolTip.MASlot[i]+'';
html += '
'+val+" ";
}else{
var val = formatPrice(this.points[_index].y);
html += ''+self.labels()[lang].toolTip.MASlot[i]+'';
html += ''+val+"
";
}
k++;
}
}
}
}
html = '';
return html;
},
shadow: false,
},
rangeSelector : {
enabled: false,
selected: 1
},
xAxis:{
type: 'datetime',
gridLineWidth: 0,
lineWidth: 0,
tickColor: '#00000000',
tickPixelInterval:200,
crosshair: {
width: 1,
color: "#000",
zIndex: 4
},
tickPositioner: function () {
var positions = [];
var _last = 0;
if (Highcharts.dateFormat('%H:%M', this.max) != "00:00"){
return null;
}
//console.log(data.last);
if(data.last.length > 1){
for (var i=0;i=this.min && tick<=this.max){
var _date = new Date(tick);
var _flag;
if ((this.max-this.min)>3600*1000*24*30*36){
_flag = Math.floor(_date.getMonth()%6);
}else if ((this.max-this.min)>3600*1000*24*30*12){
_flag = Math.floor(_date.getMonth()%3);
}else if ((this.max-this.min)>3600*1000*24*30*3){
_flag = _date.getDate();
}else{
_flag = _date.getDay();
}
if (_flag < _last && tick != this.min){
positions.push(tick);
}
_last = _flag;
}
}
}else if(data.last.length == 1){
positions.push(data.last[0][0]);
}
return positions;
},
labels: {
formatter: function () {
if (Highcharts.dateFormat('%H:%M', this.value) != "00:00"){
if (lang == "en_hk"){
if (Highcharts.dateFormat('%H%M', this.value)*1 < 920
&& (self.isUS!=1 && self.isFx!=1)
){
return Highcharts.dateFormat('%b %d 09:20', this.value);
}
return Highcharts.dateFormat('%b %d %H:%M', this.value);
}else{
if (Highcharts.dateFormat('%H%M', this.value)*1 < 920
&& (self.isUS!=1 && self.isFx!=1)
){
return Highcharts.dateFormat('%m月%d日 09:20', this.value);
}
return Highcharts.dateFormat('%m月%d日 %H:%M', this.value);
}
}else{
if (lang == "en_hk"){
return Highcharts.dateFormat('%b %d', this.value);
}else{
return Highcharts.dateFormat('%m月%d日', this.value);
}
}
}
},
opposite: true,
offset: this.options.chartHeight*-1-30,
},
yAxis: [{
labels:{
formatter: function () {
return formatPrice(this.value);
},
align:'left',
x: 3,
y: 4,
},
plotLines: data.recommData,
gridLineWidth: (self.toolTipMoved !=null)?0:1,
height: this.options.chartHeight,
top:this.options.chartTop,
opposite: true,
showFirstLabel: false,
showLastLabel: true,
crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
},
{
labels:{
formatter: function () {
return formatPrice(this.value);
},
align:"left",
x: 3,
},
opposite: false,
height: this.options.chartHeight,
top:this.options.chartTop,
},
{
top:this.options.chartHeight-43,
height: 90,
gridLineWidth: 0,
labels:{
enabled: false
},
},
{
top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
},{
top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
},{
top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
},{
top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
},{
top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
},{
top:0,height: 100,title: {text: null,},offset: 0,tickAmount : 5,opposite: true,showFirstLabel: false,showLastLabel: false,
labels:{formatter: this.subChartLabelFormatter,align:'left',x: 3,y: 4, style: { textOverflow: 'none', whiteSpace: 'nowrap'}}, crosshair: {width: 1,color: "#000",snap:false,zIndex: 4},
}],
navigator : {
enabled : (typeof longversion == "undefined")?true:false,
series: {
data: data.last,
},
height : 60,
},
scrollbar : {
enabled : false
},
series : [{
id : "vol",
type: 'column',
name: 'vol',
data: data.vol,
yAxis: 2,
color: "#cad3da",
dataGrouping: {
approximation: "sum",
units: self.options.groupingUnits,
groupPixelWidth: 1000
}
},{
name: 'primary',
type: 'candlestick',
id: 'primary',
data : data.ohlc,
yAxis: 0,
dataGrouping: {
units: self.options.groupingUnits,
groupPixelWidth: 1000
}
}],
};
},
refreshSeries : function(){
var chart = this.cur_chart;
var _series = [];
for (var i=0;i0 && this.cur_chart!=this.chart){
for (var j=0;j0){
chart.tooltip.refresh(_series);
}
},
setPeriod : function(_from,_to){
if (this.data.last[0][0]){
this.chart.xAxis[0].setExtremes(Math.max(_from,this.data.last[0][0]), _to);
$("#startDay").val(Highcharts.dateFormat('%Y-%m-%d', Math.max(_from,this.data.last[0][0])));
$("#endDay").val(Highcharts.dateFormat('%Y-%m-%d', _to));
}
},
setPeriod2 : function(period){
if (this.data.last[0][0]){
var endDay = this.edate;
var d = new Date(endDay);
d.setMonth(d.getMonth() - period);
d.setDate(d.getDate() + 1);
var yyyy = d.getFullYear().toString();
var mm = (d.getMonth()+1).toString();
var dd = d.getDate().toString();
var startDay = yyyy +"-"+ (mm[1]?mm:"0"+mm[0]) +"-"+ (dd[1]?dd:"0"+dd[0]);
this.setPeriod(Date.parse(startDay),Date.parse(endDay));
}
},
drawToolTip: function(obj, isReset){
//console.log("start drawToolTip");
//console.log(obj);
//var chart = this.chart;
this.lastObj = obj;
var chart = this.cur_chart;
var fontstyle = {color: '#666666', fontSize: '13px'};
var textattr = {zIndex: 7, class: "tooltipElement"};
//if ($(".tooltipElement.s"+obj.points[0].x).length>0){
if(!isReset){
if ($(".tooltipElement.s"+obj.points[0].x).length>0 && this.cur_chart == this.chart){
return;
}
}
if (this.cur_chart == this.chart){
$(".tooltipElement").remove();
}
if (this.toolTipMoved){
this.toolTipMoved(obj.points[0].x);
}
//chart.renderer.text(Highcharts.dateFormat('%y/%m/%d',obj.points[0].x), 15, 18).css(fontstyle).attr(textattr).add();
try {
for(var j = 0; j0 || obj.points[j].series.name.indexOf("_ema")>0 ){
/*for(var i =0; i0){
chart.renderer.text("SMA("+days+"):"+formatPrice(obj.points[j].y), 130*_index+35, 36).css(fontstyle).attr(textattr).add();
}else{
chart.renderer.text("EMA("+days+"):"+formatPrice(obj.points[j].y), 130*_index+35, 36).css(fontstyle).attr(textattr).add();
}*/
}else if (obj.points[j].series.name.indexOf("_compare")>0){
/*chart.renderer.text(this.labels()[lang].toolTip.MASlot.compare, 15, 38).css(fontstyle).attr(textattr).add();
chart.renderer.text("C:"+formatPrice(obj.points[j].y), 90, 38).css(fontstyle).attr(textattr).add();
*/
}else if (obj.points[j].series.name.indexOf("_bol")>0 && obj.points[j].point.high){
/* var _label1 = this.labels()[lang].toolTip.MASlot.bol[0]+"("+obj.points[j].series.options.p1+","+obj.points[j].series.options.p2+"): ";
var _label2 = this.labels()[lang].toolTip.MASlot.bol[1]+": ";
var _label3 = this.labels()[lang].toolTip.MASlot.bol[2]+": ";
_label1 += (obj.points[j+1].y).toFixed(2);
_label2 += (obj.points[j].point.high).toFixed(2);
_label3 += (obj.points[j].point.low).toFixed(2);
chart.renderer.text(_label1, 15, 38).css(fontstyle).attr(textattr).add();
chart.renderer.text(_label2, 240, 38).css(fontstyle).attr(textattr).add();
chart.renderer.text(_label3, 390, 38).css(fontstyle).attr(textattr).add();
*/
}else if (obj.points[j].series.name.indexOf("_sar")>0){
/*var _label = this.labels()[lang].toolTip.MASlot.sar+"("+obj.points[j].series.options.p1+","+obj.points[j].series.options.p2+"): ";
_label += (obj.points[j].y).toFixed(3);
chart.renderer.text(_label, 15, 38).css(fontstyle).attr(textattr).add();
*/
}else{
var segment = obj.points[j].series.name.split("_");
if (segment.length==2){
textattr.class = "tooltipElement text_subchart";
var index = segment[0].replace("s","")*1;
var offset = (this.isMobile)?45:27;
var _top = (this.options.chartHeight+this.options.chartTop)+((this.mobileHeight[this.isMobile]+this.options.subChartTitle)*index)+(this.mobileTop[this.isMobile]*index)+offset;
for(var i =0; i" + val3;
}else{
_val = val1 + " " + val2 + " " + val3;
}
}else if (segment[1] == "turnover"){
_val = this.labels()[lang].toolTip.TASlot[segment[1]]+": "+(addcomma(obj.points[j].y));
}else{
_val = this.labels()[lang].toolTip.TASlot[segment[1]]+": "+(obj.points[j].y).toFixed(3);
}
if(this.isMobile){
chart.renderer.text(_val, 0, _top+16).css(fontstyle).attr(textattr).add();
}else{
var clientwidth = chart.renderer.text(_val, 0, -100).css(fontstyle).attr(textattr).add().element.getBoundingClientRect().width;
chart.renderer.text(_val, chartWidth - underlyingChart.chart.margin[1] - clientwidth - 5, _top+16).css(fontstyle).attr(textattr).add();
}
}
}
}
}
} catch (err) {
//console.log(err);
}
$(".tooltipElement:eq(0)").attr("class",$(".tooltipElement:eq(0)").attr("class")+" s"+obj.points[0].x);
//console.log("end drawToolTip");
this.drawBackground();
},
drawBackground: function(){
/*
let recomCSS = {
"text-decoration": "none",
"color": "#000000",
};*/
//$('.recomProduct a').css(recomCSS);
if (this.cur_chart == this.chart){
$(".tooltipBackground").remove();
$(".tooltipLabel").remove();
}
//$(".tooltipBackground").remove();
//$(".tooltipLabel").remove();
//var chart = this.chart;
var chart = this.cur_chart;
var fontstyle = {color: '#666666', fontSize: '13px'};
var textattr = {zIndex: 7,class: "tooltipLabel"};
//var offsetx,offsety;
chart.renderer.rect(0, 0, 1920, 22, 0).attr({
fill: '#FFFFFF',
stroke: '#000',
'stroke-width': 0,
zIndex: 5,
class: "tooltipBackground"
}).add();
chart.renderer.text(this.labels()[lang].yTitle1, 0, 15).css({color: '#4F8ABD', fontSize: '13px'}).attr(textattr).add();
var j=0;
for (var i=0;i=0;k--){
if (chart.series[k].name && chart.series[k].name == this.usedSlot[i]){
if (chart.series[k].userOptions.p1){
days = "("+chart.series[k].userOptions.p1;
if (chart.series[k].userOptions.p2){
days += ","+chart.series[k].userOptions.p2;
if (chart.series[k].userOptions.p3){
days += ","+chart.series[k].userOptions.p3;
}
}
days += ")";
}
}
}
// var _y = _top+41+(this.mobileTop[this.isMobile]*(j+1));
// if(this.isMobile){
// _y = _top+15+(this.mobileTop[this.isMobile]*(j+1));
// }
chart.renderer.text(this.labels()[lang].subTitle[chartType]+days, 0, _top+16).css(fontstyle).attr(textattr).add();
j++;
}
}
},
changeChartType: function (type){
var self = this;
if (type != this.chart.series[1].type){
if (self.period!=0 && (self.isUS==1 || self.isFx==1)){
type = "line";
}
this.charttype = type;
if(type == "line") {
_width = 2;
} else {
_width = 1;
}
if(type == 'candlestick') {
_color = "#e60028";
}else{
_color = "#000000";
}
this.chart.series[1].update({
type: type,
lineWidth: _width,
color: _color,
});
}
},
changePeriodType: function (type,callback){
var self = this;
$(".chart_type").show();
if (type.endsWith("min")){
$(".range").hide();
if (self.isUS==1 || self.isFx==1){
$(".chart_type").hide();
self.charttype = "line";
}
this.period = type.replace("min","")*1;
if(self.isFx==1){
this.period = 10;
}
this.options.groupingUnits = [["minute",[this.period]],];
console.log(this);
this.init(this.stockcode,function(){
self.setPeriod(self.data.last[Math.max(self.data.last.length-71,0)][0],self.data.last[self.data.last.length-1][0]);
callback();
},this.navigatorUpdated,this.toolTipMoved);
return;
}else if (this.period != 0){
$(".range").show();
this.period = 0;
this.options.groupingUnits = [[type,[1]],];
this.init(this.stockcode,callback,this.navigatorUpdated,this.toolTipMoved);
return;
}
this.chart.series.forEach(function(ser) {
ser.update({
dataGrouping: {
units: [ [type, [1]] ]
}
}, false);
});
this.options.groupingUnits = [[type,[1]],];
this.chart.redraw();
this.selected_ts = this.chart.xAxis[0].tickPositions[this.chart.xAxis[0].tickPositions.length-1];
},
addCompare: function (code,callback){
var self = this;
if (code==""){
this.chart.yAxis[1].setTitle({text:""});
this.addMAline("",0);
return;
}
var delay = (typeof isSameOrigin !== "undefined" && isSameOrigin*1 == 0)? '/delay/1': '';
$.getJSON('/'+lang+'/data/chart/underlyingChart/code/'+code+ delay+"/period/"+self.period, function(_data) {
var compare = [];
var data = _data.mainData;
for (i = 0; i < data.underlying.length; i++) {
compare.push({
x: data.underlying[i]["ts"],
y: data.underlying[i]["last"],
high: data.underlying[i]["high"],
low: data.underlying[i]["low"],
open: data.underlying[i]["open"],
close: data.underlying[i]["last"],
vol: data.underlying[i]["vol"],
});
}
if (compare.length>0){
for(var i =0; i=0;i--){
if (chart.series[i].name && (chart.series[i].name == this.usedMASlot[_id[j]] || chart.series[i].name.startsWith(this.usedMASlot[_id[j]]+"_"))){
chart.series[i].remove();
}
}
}
this.setUsedMASlot(_id[j], "");
}
},
addMAline: function(type, id){
var chart = this.chart;
var self = this;
//return;
if (type!=""){
var tempArr = type.split("-");
var _type = tempArr[0];
var _para = "?type="+_type;
for (var i=1; i0){
self.setUsedMASlot(_index, series[i].name);
}
}else{
series[i].name = "t"+id+"_"+type;
self.setUsedMASlot(id, "t"+id+"_"+type);
}
chart.addSeries(series[i]);
}
self.addSettingBox(_type);
chart.yAxis[0].update();
self.drawEmptyBackground();
});
}
}else{
self.removeMAline(id);
}
//chart.setSize(this.options.chartWidth,this.getChartHeight());
},
removeSeries: function(id){
var chart = this.chart;
var yAxisID = id + 3;
if (this.usedSlot[id] != ""){
for (var i=chart.series.length-1;i>=0;i--){
if (chart.series[i].name && (chart.series[i].name == this.usedSlot[id] || chart.series[i].name.startsWith(this.usedSlot[id]+"_"))){
chart.series[i].remove();
chart.yAxis[yAxisID].userOptions.top = 0;
chart.yAxis[yAxisID].userOptions.min = null;
chart.yAxis[yAxisID].userOptions.max = null;
}
}
}
this.setUsedSlot(id, "");
},
drawline:function(renderer, lineColor, zIndex, x1, y1, x2, y2){
renderer.path(['M', x1, y1,'L', x2, y2]).attr({
stroke: lineColor,
//stroke: 'red',
'stroke-width': 1,
opacity: 1,
class :'gridline',
zIndex: zIndex,
}).add();
},
drawEmptyBackground: function(){
let self = this;
let chart = this.chart;
$('#underlyingChartContainer .gridline').remove();
let offsetTop = 49;
var totalsubchart=0;
for (var i=0;i=0 && type!="" && !(type == "vol" || type == "turnover")){
var tempArr = type.split("-");
var _type = tempArr[0];
var _para = "?type="+_type;
for (var i=1; i0){
return;
}
var chartWidth = $('#underlyingChartContainer').width();
var sbox = ' ';
var cbox = ' ';
container.append(sbox+cbox);*/
},
updateSeriesPosition: function(){
var chart = this.chart;
this.isMobile = ($(".mobile_header").is(":hidden"))?false:true;
var j=0;
for (var i=0;i=0 && id=0 && id0 || self.usedMASlot[0].indexOf("_ema")>0 ){
// command = (self.usedMASlot[0].split("_"))[1];
// for(var i=1;i0){
var _value = (self.usedMASlot[i].split("-"));
for(var j=1; j<_value.length;j++){
command += "-"+_value[j];
}
}else{
if(self.usedMASlot[i]!=""){
command += "-"+(self.usedMASlot[i].split("-"))[1];
// self.addMAline(command, i);
}
}
}
if (command){
self.addMAline(command, -1);
}
for(var i=0;i0)?".HK":"")+"價格",
subTitle : {
macd : "移動平均匯聚背馳指標",
rsi : "相對強弱指數",
turnover : this.stockcode + ((this.stockcode*1>0)?".HK":"") + " 成交額",
},
toolTip : {
open:"O:",
high:"H:",
low:"L:",
last:"C:",
volume:"成交量:",
underlyinghigh: this.stockcode + " 最高價",
underlyinglow: this.stockcode + " 最低價",
underlyingopen: this.stockcode + " 開市價",
underlyinglast: this.stockcode + " 價格",
MASlot: ["10天移動平均線","20天移動平均線","50天移動平均線","100天移動平均線","250天移動平均線",["保歷加平均線","保歷加下限線","保歷加上限線"],adddigit(this.comparecode) + " 價格"],
TASlot: {
turnover:"成交額",
rsi:"RSI",
macd:["MACD-棒形圖","MACD","MACD-訊號"],
},
},
calllv : "收回價",
maturity : "到期日",
strike : "行使價",
gearing : "實際槓桿",
egearing : "實際槓桿",
x: "倍",
call : "認購",
put : "認沽",
bull : "牛證",
bear : "熊證",
},
zh_cn :{
unit:{
K:"千",
M:"百万",
B:"十亿",
},
yTitle1 : this.stockcode + ((this.stockcode*1>0)?".HK":"")+"价格",
subTitle : {
macd : "移动平均汇聚背驰指标",
rsi : "相对强弱指数",
turnover : this.stockcode + ((this.stockcode*1>0)?".HK":"")+ " 成交额",
},
toolTip : {
open:"O:",
high:"H:",
low:"L:",
last:"C:",
volume:"成交量:",
underlyinghigh: this.stockcode + " 最高价",
underlyinglow: this.stockcode + " 最低价",
underlyingopen: this.stockcode + " 开市价",
underlyinglast: this.stockcode + " 价格",
MASlot: ["10天移动平均线","20天移动平均线","50天移动平均线","100天移动平均线","250天移动平均线",["保历加平均线","保历加下限线","保历加上限线"],adddigit(this.comparecode) + " 价格"],
TASlot: {
turnover:"成交额",
rsi:"RSI",
macd:["MACD-棒形图","MACD","MACD-讯号"],
},
},
calllv : "收回价",
maturity : "到期日",
strike : "行使价",
gearing : "实际杠杆",
egearing : "实际杠杆",
x: "倍",
call : "认购",
put : "认沽",
bull : "牛证",
bear : "熊证",
},
en_hk :{
unit:{
K:"K",
M:"M",
B:"B",
},
yTitle1 : this.stockcode + ((this.stockcode*1>0)?".HK":"")+ " last",
subTitle : {
macd : "MACD",
rsi : "RSI",
turnover : this.stockcode + ((this.stockcode*1>0)?".HK":"")+ " Turnover",
},
toolTip : {
open:"O:",
high:"H:",
low:"L:",
last:"C:",
volume:"Volume:",
underlyinghigh: this.stockcode + " high",
underlyinglow: this.stockcode + " low",
underlyingopen: this.stockcode + " open",
underlyinglast: this.stockcode + " last",
MASlot: ["SMA-10","SMA-20","SMA-50","SMA-100","SMA-250",["Moving average","Bollinger lower bound","Bollinger upper bound"],adddigit(this.comparecode) + " last"],
TASlot: {
turnover:"Turnover",
rsi:"RSI",
macd:["MACD-histogram","MACD","MACD-signal"],
},
},
calllv : "Call level",
maturity : "Maturity",
strike : "Strike",
gearing : "Gearing",
egearing : "Eff.Gearing",
x: "X",
call : "Call",
put : "Put",
bull : "Bull",
bear : "Bear",
},
};
_out["edu"] = _out["zh_cn"];
_out["zh-hk"] = _out["zh_hk"];
_out["zh-cn"] = _out["zh_cn"];
_out["en-hk"] = _out["en_hk"];
_out["edu-zh_hk"] = _out["zh_hk"];
_out["edu-zh_cn"] = _out["zh_cn"];
_out["edu-en_hk"] = _out["en_hk"];
return _out;
},
}