Test zooming

by bakhshi

HTML

<script src="https://code.highcharts.com/3.0.5/highcharts.js"></script>
<script src="https://code.highcharts.com/3.0.5/highcharts-more.js"></script>

<div id="container" style="height: 400px; min-width: 310px; max-width: 600px; margin: 0 auto"></div>
<button class="zoomin">+</button><button class="zoomout">-</button>
<br/><label for="" class="x"></label><br/><label for="" class="y"></label>
<div class="offset"></div>

CSS

body{
    background-color:blue;
}
label{
    color:white;
}
div.offset{
    position:absolute;
    top:0;
    left:0;
    background-color:yellow;
}

JavaScript

/*
this is a sample in which zooming and panning of highchart is controlled with our own logic.

*/

var chart;
$(function () {
    chart = new Highcharts.Chart({

	    chart: {
	        type: 'bubble',
	        zoomType: 'none',
            renderTo : $('#container')[0],
            animation:false
	    },

	    title: {
	    	text: 'Highcharts Bubbles'
	    },
	
	    series: [{
	        data: [[97,36,79],[94,74,60],[68,76,58],[64,87,56],[68,27,73],[74,99,42],[7,93,87],[51,69,40],[38,23,33],[57,86,31]]
	    }, {
	        data: [[25,10,87],[2,75,59],[11,54,8],[86,55,93],[5,3,58],[90,63,44],[91,33,17],[97,3,56],[15,67,48],[54,25,81]]
	    }, {
	        data: [[47,47,21],[20,12,4],[6,76,91],[38,30,60],[57,98,64],[61,17,80],[83,60,13],[67,78,75],[64,12,10],[30,77,82]]
	    }]
	
	});
    window.chart = chart;
    chart.__myoptions = {};
    
    $('.zoomin').click(zoomIn);
    $('.zoomout').click(zoomOut);
   
    $('#container svg').mousemove(mouseMove);
    $('#container svg').on('mousedown', mouseDown);
    $('#container svg').on('mouseup', mouseUp);
    
});

function zoomIn(){
    var xAxis = chart.xAxis[0],
        yAxis = chart.yAxis[0],
        xmin = xAxis.min,
        xmax = xAxis.max,
        ymin = yAxis.min,
        ymax = yAxis.max,
        xLen = xmax - xmin,
        yLen = ymax - ymin,
        newxmin = xmin + xLen/4,
        newxmax = xmax -xLen/4,
        newymin = ymin + yLen/4,
        newymax = ymax -yLen/4;
    
    xAxis.zoom(newxmin, newxmax);
    yAxis.zoom(newymin, newymax);
    chart.redraw();
}
function zoomOut(){
    var xAxis = chart.xAxis[0],
        yAxis = chart.yAxis[0],
        xmin = xAxis.min,
        xmax = xAxis.max,
        ymin = yAxis.min,
        ymax = yAxis.max,
        xLen = xmax - xmin,
        yLen = ymax - ymin,
        newxmin = xmin - xLen/2,
        newxmax = xmax + xLen/2,
        newymin = ymin - yLen/2,
        newymax = ymax + yLen/2;
    
    xAxis.zoom(newxmin, newxmax);
    yAxis.zoom(newymin, newymax);
   ...