SOURCE

$('#replayBtn').click(function(){
  begin = new Date($('#beginInput').val())
  showChart($('#conInput').val(), begin.toJSON());
})
  
function prev(){
    end = new Date(end.valueOf() - 300 * 1000)
    $('#endInput').val(end.toJSON())
    showChart($('#conInput').val(), begin.toJSON(), end.toJSON());
}
function next(){
    end = new Date(end.valueOf() + 300 * 1000)
    $('#endInput').val(end.toJSON())
    showChart($('#conInput').val(), begin.toJSON(), end.toJSON());
}
  $("#prevButton").click(prev)
  $("#nextButton").click(next)

function prevDay(){
    begin = new Date(begin.valueOf() - 24*3600*1000)
    $('#beginInput').val(begin.toJSON())
    showChart($('#conInput').val(), begin.toJSON());
}
function nextDay(){
    begin = new Date(begin.valueOf() + 24*3600*1000)
    $('#beginInput').val(begin.toJSON())
    showChart($('#conInput').val(), begin.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){
$.when(
  $.get("http://alihk10.qbtrade.org/api/tick/MinuteTicks?contract=" + con + "&date=" + begin + "&rev=" + rev), 
  $.get("http://alihk10.qbtrade.org/api/tick/LimitBreakDecisions?contract=" + con + "&date=" + begin + "&rev=" + rev)
).done(function (data, decisions) {
  data = data[0]
  decisions = decisions[0]
  var colors = ['red', 'orange', 'green', 'blue', 'purple']
  var chartData = data.map(function(p){
    return {
      x: p.timestamp*1000, 
      y: p.close
    }})
  var volData = data.map(function(p){
    return {
      x: p.timestamp*1000, 
      y: p.volume,
    }})
  var avgData = data.map(function(p){
    return {
      x: p.timestamp*1000, 
      y: p.weightedAvg,
    }})
  var labels = data.filter(function(x){return x.labels.length}).map(function(x) {return x.labels})
  var des = decisions.map(function(x){return {
    x: x.tick.timestamp*1000, 
    y: x.tick.last,
    tooltip: {formatter: function(){return x.comment}},
    dataLabels: {
                enabled: true,
                align: 'right',
                x: -3,
      crop: false, overflow:'none',
      y: -10,
                verticalAlign: 'middle',
      format: x.comment
            }
  }})
  var ss = [
    {data: chartData, zIndex: 1, name: 'close', dataGrouping:{enabled: false}},
    {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,}]
  var used = []
  labels.forEach(function(ls, i){
      var l = ls[ls.length - 1]
      if (l.ticks.length)
      	ss.push({
          animation: false,
          color: colors[l.level - 1],
          marker: {enabled: true, radius: 1.5*l.level, symbol: 'circle'},
          type: l.ticks.length >= (l.level == 1 ? 3 : 1) ? 'line' : 'scatter',
          zIndex: 2,
          data:
          l.ticks.map(function(t){
            return [t.timestamp*1000, t.last]
          })})
  })
  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-12" />
<button id="replayBtn">show</button>
<button id="prevDayButton">prev day</button>
<button id="nextDayButton">nxt day</button>
rev: <input type="checkbox" id="revCheck" />