var underlyingCNHKChart = {
chart : null,
container : "",
isHSI: false,
wtype : null,
type : null,
ctype : null,
fromdate : null,
todate : null,
mode : "desktop",
container : "",
vol_unit: "",
title: "",
init : function(code, start, end){
var self = this;
self.labels["edu"] = self.labels["zh_cn"];
self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop";
$.getJSON('/?q=/'+lang+'/data/chart/underlyingCNHKChart/code/'+code+'/end/'+end+'/start/'+start, function(_data) {
var data = self.decode(_data);
$('#underlyingCNHKChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){
self.chart = chart;
self.drawBackground();
});
});
},
decode : function(_data){
return _data.mainData;
},
colors : {'bar1' : "#1b435b",'bar2' : "#8b460e", 'last' : "#000000",'zero' : "#000000" },
margin : {mobile: 70, desktop: 80},
chartheight : {mobile: 218, desktop: 262},
getJSON : function(data){
var bar = data.bar;
var bar_min = data.bar_min;
var bar_max = data.bar_max;
var last = data.last;
var last_max = data.last_max;
var last_min = data.last_min;
vol_unit = data.bar_unit;
var self = this;
return {
chart : {
marginBottom: 50,
marginLeft: 70,
marginRight: 70,
marginTop: 50,
spacingTop: -5,
height: 308,
events: {
redraw: function(event) {
self.redraw();
}
}
},
plotOptions: {
line: {
events: {
legendItemClick: function () {
return false;
}
}
},
series: {
grouping: false
},
},
tooltip: {
useHTML: true,
formatter: function() {
var _html = '' + Highcharts.dateFormat('%Y-%m-%d', this.x) + '';
var index = this.x;
if(bar[this.points[0].point.index][1]!=null){
var _var = bar[this.points[0].point.index][1];
var _string = '-';
//_string = _var + vol_unit;
if(_var!=0){
_string = (lang=='en_hk')?formatTurnover(_var*1000000000, lang, ''):formatTurnover(_var*100000000, lang, '');
_string = _string.replace("+", "");
//_string = _string.replace("-", self.labels[lang].outText);
}
_html += '
' + self.labels[lang].tooltip1 +' : ' + _string + ' ';
}
if(last[this.points[0].point.index][1]!=null){
var _var = addcomma(last[this.points[0].point.index][1].toFixed(1));
_html += '
' + self.labels[lang].ytitle2 + self.labels[lang].hkd +' : ' + _var + ' ';
}
return _html;
}
},
rangeSelector : {
inputEnabled:false,
enabled: false
},
xAxis:{
type: 'datetime',
labels: {
formatter: function () {
//return Highcharts.dateFormat('%d/%m', this.value);
if(lang=="en_hk"){
return Highcharts.dateFormat('%b %d', this.value);
}else{
return Highcharts.dateFormat('%m月%d日', this.value);
}
}
},
},
yAxis: [{
title: {
useHTML: false,
text: "",
},
labels:{
useHTML: false,
align:'left',
x: -50,
y: 5,
formatter: function () {
if((this.value)>0){
color = ' style="color:'+self.colors["bar1"]+'";';
}else if((this.value)<0){
color = ' style="color:'+self.colors["bar2"]+'";';
}else{
color = '';
}
var _html = '' + (this.value).toFixed(2) + '';
return _html;
}
},
opposite: false,
tickAmount : 7,
showLastLabel: true,
gridLineDashStyle: 'Solid',
max: bar_max,
min: bar_min
},
{
title: {
useHTML: false,
text: "",
},
labels:{
align:'right',
x: 40,
y: 5,
formatter: function () {
return (this.value).toFixed(2);
},
style: {color: "#000"}
},
opposite: true,
tickAmount : 7,
showLastLabel: true,
gridLineDashStyle: 'Solid',
/*max: last_max,
min: last_min*/
}],
navigator : {
enabled : false,
// top:540
},
scrollbar : {
enabled : false
},
series : [{
data : bar,
color : this.colors["bar1"],
negativeColor: this.colors["bar2"],
type: 'column',
yAxis: 0,
},{
data : last,
color : this.colors["last"],
yAxis: 1,
}],
exporting: {
enabled: false
}
};
},
redraw: function(){
var chart = this.chart;
var offsetx,offsety;
var self = this;
var offsetx = 0;
var offsety = 15;
this.addLegendText(offsetx-30, offsety,this.labels[lang].ytitle1+'('+vol_unit+')','chart1_0',"#000");
this.addLegendText(chart.chartWidth - 95, offsety,this.labels[lang].ytitle2,'chart1_1',"#000");
},
addLegendText: function(x,y,text,i, color){
var chart = this.chart;
$("#drawLegendRect"+i).remove();
$("#drawLegendText"+i).remove();
/*
chart.renderer.rect(x, y, 25,8, 0).attr({
fill: color,
'stroke-width': 0,
id : 'drawLegendRect'+i,
zIndex: 5,
}).add();
*/
chart.renderer.label(text, x+30, y-8, '', '' + '', '' + '')
.css({
color: color,
fontSize:'12px'
})
.attr({
zIndex: 5,
id: 'drawLegendText'+i,
})
.add();
},
drawBackground: function(){
var chart = this.chart;
var offsetx,offsety;
var self = this;
this.redraw();
},
labels : {
zh_hk :{
ytitle1: "南向合計淨買入/賣出金額",
ytitle2: "正股價格",
tooltip1: '淨買入/賣出金額',
inText: '流入',
outText: '流出',
hkd: '(港元)'
},
zh_cn :{
ytitle1: "南向合计净买入/卖出金额",
ytitle2: "正股价格",
tooltip1: '净买入/卖出金额',
inText: '流入',
outText: '流出',
hkd: '(港元)'
},
en_hk :{
ytitle1: "Southbound Net Inflow/Net Outflow",
ytitle2: "Price",
tooltip1: 'Net Inflow/Net Outflow',
inText: 'In',
outText: 'Out',
hkd: '(HKD)'
},
},
}