SOURCE

$('#replayBtn').click(function(){
  begin = new Date($('#beginInput').val())
  end = new Date(begin.valueOf() + 24*3600*1000)
  showChart($('#conInput').val(), begin.toJSON(), end.toJSON());
})
  

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())
    showChart($('#conInput').val(), begin.toJSON(), end.toJSON());
}
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())
    showChart($('#conInput').val(), begin.toJSON(), end.toJSON());
}
  $("#prevDayButton").click(prevDay)
  $("#nextDayButton").click(nextDay)
rev = false
$("#revCheck").change(function(){
  rev = !rev;
})
Highcharts.setOptions({
global: {
   timezoneOffset: -8*60,
  usdUtc: false
}});
function showChart(con, begin, end){
$.when(
  $.get("http://alihk10.qbtrade.org/api/candle/ticks?contract=" + con + "&begin=" + begin + "&end=" + end), 
  $.get("http://alihk10.qbtrade.org/api/tick/minuteticks?contract=" + con + "&begin=" + begin + "&end=" + end+ "&rev=" + rev)
).done(function (data, decisions) {
  data = data[0]
  decisions = decisions[0]
  var colors = ['red', 'orange', 'green', 'blue', 'purple']
  var ema = data[0].last
  var alpha = 2/(parseFloat($('#emaInput').val())+1)
  var chartData = data.map(function(p){
    return [
      p.timestamp*1000, 
      (p.close || p.last)
    ]})
  var emaData = data.map(function(p){
    return [
      p.timestamp*1000, 
      ema = (1-alpha) * ema + alpha * (p.close || p.last)
    ]})
  var candleData = decisions.map(function(p){
    return [
      p.timestamp*1000+57*1000, 
      (p.close || p.last)
    ]})
  var volData = data.map(function(p){
    return [
      p.timestamp*1000, 
      p.volume,
    ]})
  var ss = [
    {data: chartData, typz:'line', zIndex: 1, name: 'last'},
    {data: emaData, typz:'line', zIndex: 1, name: 'ema'},
    {data: candleData, typz:'line', zIndex: 1, name: 'ema'},
    //{data: volData, type:'column', yAxis: 1,color: 'rgba(225,225,225,0.7)', zIndex: 0},
    //{data: avgData, name: 'avg',color: 'rgba(220,200,0,1)',lineWidth: 1}, 
    //{data: des, type:'scatter', zIndex: 3,}
  ]
  return Highcharts.stockChart('container', {
		chart:{animation:false},
    rangeSelector: {
        selected: 1
    },
    yAxis: [{}, {}],
		plotOptions:{line: {
        animation: false
    },scatter:{animation: false}},
    series: ss
	});
}); 
}

<div id="container" style="height: 600px; min-width: 310px"></div>
<input id="conInput" value="ic1610:cffex" />
<input id="beginInput" value="2016-09-13" />
<input id="emaInput" value="0.1" />
<button id="replayBtn">show</button>
<button id="prevDayButton">prev day</button>
<button id="nextDayButton">nxt day</button>
rev: <input type="checkbox" id="revCheck" />