CODEWITHSUNDEEP
javascripthighcharts
Guifan Li
Guifan Li

Reputation: 1663

highcharts wrapper function for 'drag'

I am trying to write a wrapper function for 'drag' so that when I click mouse and drag the mouse, I can get the min/max value of selected area on xAxis. When I try the following, I can see that e is a MouseEvent, however, I am not able to see e.min and e.max (they are undefined). 

Highcharts.wrap(Highcharts.Pointer.prototype, "drag", function(p, e) {
        console.log('drag started');
        console.log(e);
        console.log(e.min, e.max);
        p.call(this, e);
    });

Does anyone know that is there a way to get the boundary of selected area on xAxis?

Thanks very much!

Upvotes: 0

Views: 416

Answers (1)

Vicky Chijwani
Vicky Chijwani

Reputation: 10479

You can do it like this:

JSFiddle link

var axisMin = -1, axisMax = -1;

$(function () {
    Highcharts.wrap(Highcharts.Pointer.prototype, "dragStart", function(p, e) {
        console.log('drag started');
        p.apply(this, Array.prototype.slice.call(arguments, 1));
        // the dragStart function sets this.mouseDownX for you
        // documentation for Axis#toValue() function is here:
        // http://api.highcharts.com/highcharts#Axis.toValue
        axisMin = this.chart.xAxis[0].toValue(this.mouseDownX, 0);
    });

    Highcharts.wrap(Highcharts.Pointer.prototype, "drag", function(p, e) {
        // e.chartX represents the pixel position of the mouse pointer in the chart
        axisMax = this.chart.xAxis[0].toValue(e.chartX, 0);
        console.log('' + new Date(axisMin) + ' to ' + new Date(axisMax));
        p.apply(this, Array.prototype.slice.call(arguments, 1));
    });

    $.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data) {

        $('#container').highcharts({
            chart: {
                zoomType: 'x'
            },
            xAxis: {
                type: 'datetime'
            },
            series: [{
                data: data
            }]
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.src.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Upvotes: 2

Related Questions