SOURCE

//<![CDATA[
function replay() {
	begin = new Date($('#beginInput').val())
	end = new Date(begin.valueOf() + 24 * 3600 * 1000)
	showChart($('#stockInput').val(), $('#conInput').val(), begin.toJSON(), end.toJSON(), $('#refConInput').val());
}
$('#replayBtn').click(replay)
  

function prevDay() {
	begin = new Date(begin.valueOf() - 24 * 3600 * 1000)
	$('#beginInput').val(begin.toJSON())
	end = new Date(end.valueOf() - 24 * 3600 * 1000)
	$('#endInput').val(end.toJSON())
	replay()
}
function nextDay() {
	begin = new Date(begin.valueOf() + 24 * 3600 * 1000)
	$('#beginInput').val(begin.toJSON())
	end = new Date(end.valueOf() + 24 * 3600 * 1000)
	$('#endInput').val(end.toJSON())
	replay()
}
$("#prevDayButton").click(prevDay)
$("#nextDayButton").click(nextDay)
rev = false
$("#revCheck").change(function(){
	rev = !rev;
})
Highcharts.setOptions({
	global: {
		timezoneOffset: -8*60,
		usdUtc: false
	}});
ticks = []
mTicks = []
function showChart(stockCon, con, begin, end, refCon) {
	$.when(
	  $.get("http://alihk10.qbtrade.org/api/tick/GetTicksWithSignals?contract=" + stockCon + "&date=" + begin + '&rev=' + rev + '&refCon=' + refCon + '&refFuture=' + con),
	  $.get("http://alihk10.qbtrade.org/api/tick/MinuteTicks?contract=" + con + "&date=" + begin + "&rev=" + rev)
	).done(function (res1, res2) {
		ticks = res1[0]
		mTicks = res2[0]
		console.log('data loaded')
		var colors = ['red', 'orange', '#d7af4f', 'green', 'cyan', 'blue', 'purple']
		var chartData = ticks.map(function(p){
			return {
				x: p.timestamp*1000, 
				y: p.last
			}
		})
		var volData = ticks.map(function(p){
			return [
			  p.timestamp*1000, 
			  p.volume,
			]})
		var avgData = ticks.map(function(p){
			return {
				x: p.timestamp*1000, 
				y: p.avg,
			}})
		var candleData = []
		mTicks.forEach(function(p, i){
			if (i == ticks.length -1) return;
			var minu = Math.floor(p.timestamp/60)
			var nxtMin = Math.floor(ticks[i+1].timestamp/60)
			if (minu != nxtMin)
				candleData.push([p.timestamp*1000, p.close || p.last])
		})
		lastTk = ticks[0]
		window.used = []
		var startTk = ticks[0]
    var sigPoints = []
		ticks.forEach(function(p, i){
      if (p.bs != "N"){
        sigPoints.push({x: p.timestamp*1000, y: p.last,
                       marker: {
                        enabled: true,
                        fillColor: p.bs == 'B' ? 'red' : p.bs == 'S' ? 'green' :'lightgrey',
                        symbol: p.bs == 'B' ? 'triangle' : p.bs == 'S' ? 'triangle-down' :'circle',
                       }});
      }
		})
  
		var labels = mTicks.filter(function(x){return x.labels.length}).map(function(x) {return x.labels})
  
		var ss = [
		  {data: chartData, typz:'line', zIndex: 1, name: 'last',turboThreshold: 100000,
		  	cropThreshold: 100000,lineWidth: 1,
		  	states: {hover: {enabled: false}},
		  	dataGrouping: {enabled: false},
		  	tooltip: {
		  		pointFormatter: function(){
		  			var x = this.x/1000
		  			var tk = ticks.filter(function(t){return t.timestamp >= x})[0]
		  			txt = 'last: ' + this.y + '<br>'
		  			if (tk){
            	txt += tk.reason + '<br>'
            	txt += tk.comment + '<br>'
		  				feat = tk.refFeature
              if (feat){
		  				for (var x in feat) {
		  					if (x != 'timestamp') txt += x + ': ' + feat[x]+ '<br>'
		  				}}
		  				feat = tk.featureVector
              if (feat){
		  				for (var x in feat) {
		  					if (x != 'timestamp') txt += x + ': ' + feat[x]+ '<br>'
		  				}}
		  			}
		  			return txt
		  		}}},
		  //{data: emaData, typz:'line', zIndex: 1, name: 'ema'},
		  {data: candleData, type:'line', zIndex: 0, name: 'candle',dataGrouping: {enabled: false},turboThreshold: 100000, yAxis: 1,tooltip:{enabled: false}},
		  //{data: volData, type:'column', yAxis: 1,color: 'rgba(225,225,225,0.7)', zIndex: 0},
		  {data: avgData, typz:'line', name: 'avg',color: 'rgba(220,200,0,1)', lineWidth: 1, turboThreshold: 100000,  yAxis: 0}, 
      {data: sigPoints, type:'scatter', name: 'signals', zIndex: 3, turboThreshold: 100000,
		  	tooltip: {
		  		pointFormatter: function(){
		  			var x = this.x/1000
		  			var tk = ticks.filter(function(t){return t.timestamp >= x})[0]
		  			txt = 'last: ' + this.y + '<br>'
		  			if (tk){
            	txt += tk.reason + '<br>'
            	txt += tk.comment + '<br>'
		  				feat = tk.featureVector
              if (feat){
		  				for (var x in feat) {
		  					if (x != 'timestamp') txt += x + ': ' + feat[x]+ '<br>'
		  				}}
		  				feat = tk.refFeature
              if (feat){
		  				for (var x in feat) {
		  					if (x != 'timestamp') txt += x + ': ' + feat[x]+ '<br>'
		  				}}
		  			}
		  			return txt
		  		}}}, 
		]  
		return Highcharts.stockChart('container', {
			chart:{animation:false,
				legend: {enabled: true}},
			rangeSelector: {
				selected: 1
			},
			legend: {enabled: true},
			yAxis: [{}, {}],
			plotOptions:{line: {
				animation: false
			},scatter:{animation: false}},
			series: ss,      
      tooltip: {
          borderWidth: 0,
          borderRadius: 0,
          positioner: function () {
            return { x: 10, y: 35 };
            if (isNaN(this.now.anchorX))
            console.log(this)
            if (isNaN(this.now.anchorX) || this.now.anchorX < this.chart.chartWidth / 2){
              return { x: this.chart.chartWidth / 2, y: 35 };
            } else {
              return { x: 10, y: 35 };
            }
          },
          shadow: false
      }
		});
	}); 
}
//]]>

<div id="container" style="height: 800px; min-width: 310px"></div>
<input id="stockInput" value="000768:exchange.cn.sze" />
<input id="conInput" value="if1610:cffex" />
<input id="refConInput" value="399001:exchange.cn.sze" />
<input id="beginInput" value="2016-09-22" />
<input id="emaInput" value="20" />
<button id="replayBtn">show</button>
<button id="prevDayButton">prev day</button>
<button id="nextDayButton">nxt day</button>
rev: <input type="checkbox" id="revCheck" />