var nbBarChart = { chart : null, container : "", isHSI: false, isHome: false, wtype : null, type : null, ctype : null, fromdate : null, todate : null, mode : "desktop", container : "", vol_unit: "", title: "", init : function(type,isHome){ var self = this; self.initAH(type,isHome,false); }, initAH : function(type,isHome,isAh){ var self = this; self.labels["edu"] = self.labels["zh_cn"]; self.labels["zh-hk"] = self.labels["zh_hk"]; self.labels["en-hk"] = self.labels["en_hk"]; self.labels["zh-cn"] = self.labels["zh_cn"]; self.labels["edu-zh_hk"] = self.labels["zh_hk"]; self.labels["edu-en_hk"] = self.labels["en_hk"]; self.labels["edu-zh_cn"] = self.labels["zh_cn"]; if (isHome){ this.isHome = true; } if (isAh){ this.colors = this.colorsAH; } this.type = (type!='')?type:'total'; self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop"; $.getJSON('/?q=/'+lang+'/data/chart/nbBarChart/type/'+type, function(_data) { var data = self.decode(_data); if (self.isHome){ var _date = new Date(data.sh[data.sh.length-1][0]); $(".cnhk_stime").html(data.sdate); } $('#nbBarChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){ self.chart = chart; self.drawBackground(); }); }); }, init : function(type, start, end, isHome){ var self = this; self.labels["edu"] = self.labels["zh_cn"]; self.labels["zh-hk"] = self.labels["zh_hk"]; self.labels["en-hk"] = self.labels["en_hk"]; self.labels["zh-cn"] = self.labels["zh_cn"]; self.labels["edu-zh_hk"] = self.labels["zh_hk"]; self.labels["edu-en_hk"] = self.labels["en_hk"]; self.labels["edu-zh_cn"] = self.labels["zh_cn"]; if (isHome){ this.isHome = true; } this.type = (type!='')?type:'total'; self.mode = ($('div .mobile_only').is(':visible'))?"mobile":"desktop"; $.getJSON('/?q=/'+lang+'/data/chart/nbBarChart/type/'+type+'/end/'+end+'/start/'+start, function(_data) { var data = self.decode(_data); if (self.isHome){ var _date = new Date(data.sh[data.sh.length-1][0]); $(".cnhk_stime").html(data.sdate); } $('#nbBarChartContainer').highcharts('StockChart',self.getJSON(data), function (chart){ self.chart = chart; self.drawBackground(); }); }); }, decode : function(_data){ return _data.mainData; }, decode_date : function(_data){ return _data.date; }, colors : {line1 : "#000",sz : "#88abd5", sh : "#ed8b00", total : "#1c6a64"}, colorsAH : {line1 : "#000",sz : "#88abd5", sh : "#ed8b00", total : "#008259"}, margin : {mobile: 70, desktop: 80}, chartheight : {mobile: 218, desktop: 262}, getJSON : function(data){ var self = this; var sh = data.sh; var sz = data.sz; var total = data.total; var barData = {sz : sz, sh : sh, total : total}; var vol_max = data.vol_max; var vol_min = data.vol_min; var percent = data.percent; var percent_max = data.percent_max; var percent_min = data.percent_min; vol_unit = data.vol_unit; title = data.title; return { chart : { marginBottom: 50, marginLeft: 50, marginRight: 50, marginTop: 50, spacingTop: -5, height: (self.isHome)?350:400, events: { redraw: function(event) { self.redraw(); } } }, plotOptions: { line: { events: { legendItemClick: function () { return false; } } }, column: { stacking: 'normal', }, series: { grouping: false }, }, tooltip: { useHTML: true, formatter: function() { var _html = '
' + Highcharts.dateFormat('%Y-%m-%d', this.x) + ''; if(total[this.points[0].point.index][1]!=null){ var isNoData = (sh[this.points[0].point.index][1]==0 || sz[this.points[0].point.index][1]==0)?true:false; _html += self.formatTooltipQuotaUsage(total[this.points[0].point.index][1], self.labels[lang].total, isNoData); } if(sh[this.points[0].point.index][1]!=null){ var isNoData = (sh[this.points[0].point.index][1]==0)?true:false; _html += self.formatTooltipQuotaUsage(sh[this.points[0].point.index][1], self.labels[lang].sh, isNoData); } if(sz[this.points[0].point.index][1]!=null){ var isNoData = (sz[this.points[0].point.index][1]==0)?true:false; _html += self.formatTooltipQuotaUsage(sz[this.points[0].point.index][1], self.labels[lang].sz, isNoData); } _html += '
' + self.labels[lang].ytitle2 + ': ' + percent[this.points[0].point.index][1].toFixed(1) + '% '; return _html; } }, rangeSelector : { inputEnabled:false, enabled: false }, xAxis:{ type: 'datetime', labels: { formatter: function () { //return Highcharts.dateFormat('%d/%m', this.value); if(lang=="en_hk" || lang=="en-hk" || lang=="edu-en_hk" ){ return Highcharts.dateFormat('%b %d', this.value); }else{ return Highcharts.dateFormat('%m月%d日', this.value); } } }, }, yAxis: [{ title: { useHTML: false, text: "", }, labels:{ align:'right', x: 40, y: 5, formatter: function () { return (this.value).toFixed(1); }, style: {color: this.colors[this.type]} }, opposite: true, tickAmount : 5, showLastLabel: true, gridLineDashStyle: 'Solid', max: (vol_max>Math.abs(vol_min))?vol_max:Math.abs(vol_min), min: (vol_max>Math.abs(vol_min))?vol_max*-1:vol_min, }, { title: { useHTML: false, text: "", }, labels:{ align:'left', x: -40, y: 5, formatter: function () { return (this.value).toFixed(1) + "%"; }, style: {color: "#000"} }, opposite: false, tickAmount : 5, showLastLabel: true, gridLineDashStyle: 'Solid', max: percent_max, min: percent_min }], navigator : { enabled : false, // top:540 }, scrollbar : { enabled : false }, series : [{ data : barData[this.type], color : this.colors[this.type], type: 'column', yAxis: 0, },{ data : percent, color : this.colors["line1"], yAxis: 1, }], exporting: { enabled: false } }; }, redraw: function(){ var chart = this.chart; var offsetx,offsety; var self = this; var offsetx = 0; var offsety = 10; this.addLegendText(offsetx-30, offsety,this.labels[lang].ytitle2,'chart2_0',"#000"); if (lang=='en_hk' || lang=='en-hk'){ this.addLegendText(chart.chartWidth - 200, offsety,this.labels[lang].ytitle1+'('+vol_unit+this.labels[lang].rmb+')','chart2_1',this.colors[this.type]); }else{ this.addLegendText(chart.chartWidth - 150, offsety,this.labels[lang].ytitle1+'('+vol_unit+this.labels[lang].rmb+')','chart2_1',this.colors[this.type]); } }, 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(); }, formatTooltipQuotaUsage: function(number, title, isNoData){ var self = this; //var _var = number.toFixed(2); var _var = number; var _string = '-'; if(_var!=0){ _string = (lang=='en_hk' || lang=="en-hk" || lang=="edu-en_hk")?formatTurnover(_var*1000000000, lang, ''):formatTurnover(_var*100000000, lang, ''); _string = _string.replace("+", self.labels[lang].inText); _string = _string.replace("-", self.labels[lang].outText); } var html = '
' + self.labels[lang].ytitle1 + '('+ title+') : ' + _string + self.labels[lang].rmb+ ' '; if(isNoData){ html = '
' + self.labels[lang].ytitle1 + '('+ title+') : ' + self.labels[lang].nodata +' '; } return html; }, labels : { zh_hk :{ ytitle1: "使用額度", ytitle2: "滬股、深股通成交佔大市成交", sh: '滬股通', sz: '深股通', total: '北向合計', inText: '流入', outText: '流出', rmb: '人民幣', nodata: '使用額度低於70%*' }, zh_cn :{ ytitle1: "使用额度", ytitle2: "沪股、深股通成交占大市成交", sh: '沪股通', sz: '深股通', total: '北向合计', inText: '流入', outText: '流出', rmb: '人民币', nodata: '使用额度低于70%*' }, en_hk :{ ytitle1: "Quota Usage", ytitle2: "Stock Connect Turnover/
Cash Turnover %", sh: 'Shanghai Southbound', sz: 'Shenzhen Southbound', total: 'Combined Northbound', inText: 'Buy ', outText: 'Sell ', rmb: ' in RMB', nodata: 'Quota Usage is less than 70%*' }, }, }