Test zooming on touch

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;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
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').on('touchmove',mouseMove);
    $('#container svg').on('touchstart', mouseDown);
    $('#container svg').on('touchend', 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 +...