Highcharts with custom HTML/CSS buttons

chart.html

<div class="zoom_controls">
  <span><?php echo $this->tr('Zoom:')?></span>
  <a href="#" data-chart="line" data-range="1m">1m</a>
  <a href="#" data-chart="line" data-range="3m">3m</a>
  <a href="#" data-chart="line" data-range="6m">6m</a>
  <a href="#" data-chart="line" data-range="1y">1y</a>
  <a href="#" data-chart="line" data-range="Ytd">YTD</a>
  <a href="#" data-chart="line" data-range="All">All</a>
</div>
  
<script type="text/javascript">
$('.zoom_controls a').click(function(e){
    e.preventDefault();
    // OK, pretty ugly :)
    var call = 'zoom' + $(this).attr('data-range');
    // I have two globally accessible charts here:
    if ($(this).attr('data-chart') == 'line') {
        lineChart[call]();
    } else {
        candleChart[call]();
    }
    $(this).addClass('active');
})
</script>

<!-- Highcharts container goes here -->

charts.js

var proto = Highcharts.Chart.prototype;

proto.zoomToD = function(delta){
    var chartMin = this.xAxis[1].min;
    var chartMax = this.xAxis[0].max;
    var min = chartMax - delta;

    if (chartMin < min) {
        // this.xAxis[0] is the view, this.xAxis[1] is the navigator
        this.xAxis[0].setExtremes(min, chartMax);
        return true;
    }

    this.xAxis[0].setExtremes(chartMin, chartMax);
    return false;
}
proto.zoom1m = function(){
    return this.zoomToD(2592000 * 1000);
}
proto.zoom3m = function(){
    return this.zoomToD(2592000 * 3 * 1000);
}
proto.zoom6m = function(){
    return this.zoomToD(2592000 * 6 * 1000);
}
proto.zoom1y = function(){
    return this.zoomToD(2592000 * 12 * 1000);
}
proto.zoomAll = function(){
    // picking max values from the navigator axis
    this.xAxis[0].setExtremes(this.xAxis[1].min, this.xAxis[1].max);
}
proto.zoomYtd = function(){
    var chartMin = this.xAxis[1].min;
    var chartMax = this.xAxis[1].max;
    var min = chartMax - 2592000 * 12 * 1000;

    if (chartMin < min) {
        this.xAxis[0].setExtremes(min, chartMax);
        return true;
    }

    this.xAxis[0].setExtremes(chartMin, chartMax);
    return false;
}

/* And then I define some stuff that instantiates Highcharts.StockChart objects, e.g.: */
lineChart = new Highcharts.StockChart({
    chart: {
        renderTo: containerId,
        type: 'line',
    },
    series: [{
        id: "data",
        data: graphData
    }],
    rangeSelector: {
        /* It seems like you'd want to hide Highcharts' own rangeSelector since we're using a custom one*/
        enabled: false
    }
});

style.css

/* 

You could possibly add a .active class so you could highlight currently selected zoom level buttons
Though then you'll have to catch all setExtremes calls and make sure your .active buttons should still be highlighted.

 */
.zoom_controls a {
  display: block;
  width: 30px;
  height: 16px;
  line-height: 16px;
  margin-top: 3px;
  float: left;
  text-decoration: none;
  color: black !important;
  text-align: center;
  border: 1px #CCC inset;
  background-color: #aaa;
  /* Should look a lot like the original :) */
  background-image: linear-gradient(bottom, rgb(214,214,214) 34%, rgb(232,232,232) 100%);
  background-image: -o-linear-gradient(bottom, rgb(214,214,214) 34%, rgb(232,232,232) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(214,214,214) 34%, rgb(232,232,232) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(214,214,214) 34%, rgb(232,232,232) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(214,214,214) 34%, rgb(232,232,232) 100%);
}
.zoom_controls a:hover {
  background-color: #a6d1ff;
  background-image: linear-gradient(bottom, rgb(118,175,201) 34%, rgb(166,209,255) 100%);
  background-image: -o-linear-gradient(bottom, rgb(118,175,201) 34%, rgb(166,209,255) 100%);
  background-image: -moz-linear-gradient(bottom, rgb(118,175,201) 34%, rgb(166,209,255) 100%);
  background-image: -webkit-linear-gradient(bottom, rgb(118,175,201) 34%, rgb(166,209,255) 100%);
  background-image: -ms-linear-gradient(bottom, rgb(118,175,201) 34%, rgb(166,209,255) 100%);
}

Hello!

Is there a lice DEMO of all this code?

Thank you!