Highcharts: how to get the data points in the zoom

Question

I am new to Highcharts.

I have a line chart. Here is the categories:

 ["9/7/14", "9/8/14", "9/9/14", "9/10/14", "9/11/14", "9/12/14", "9/13/14", "9/14/14", "9/15/14", "9/16/14", "9/17/14", "9/18/14", "9/19/14", "9/20/14", ...]

Here is the data series:

[1, 4, 0, 2, 1, 1, 1, 5, 3, 1, 0, 0, 6, 8, ... ]

I added zoom to my chart, very similar to this jsfiddle demo: http://jsfiddle.net/348sh/3/

chart: {
        renderTo: 'container', 
        zoomType: 'x'
},

I would like to get the total of only those Y values within the zoomed-in window, not the total of the entire data series. For this, I need to capture what values are included in the x axis in the zoomed window. So I added the following based on my research:

xAxis: {
  type: 'line',
  events: {
    setExtremes: function(event) {
          console.log(event.min);
          console.log(event.max);
      }
  }
}

However, the values for event.min or event.max are numbers such as 3.6552511415525117, 7.10730593607306. I have no way to know which x values are included in the zoomed window. How can I find which x values are included? Any way to get the start and end x values ?

Thanks!

Answer 1

This may help you . Try this fiddle : http://jsfiddle.net/7kv9a25r/ .

    chart: {
        events: {
            selection: function (event) {
                var text,
                    label;
                if (event.xAxis) {
                    text = 'min: ' + Highcharts.numberFormat(event.xAxis[0].min, 2) + ', max: ' + Highcharts.numberFormat(event.xAxis[0].max, 2);
                } else {
                    text = 'Selection reset';
                }
                label = this.renderer.label(text, 100, 120)
                    .attr({
                        fill: Highcharts.getOptions().colors[0],
                        padding: 10,
                        r: 5,
                        zIndex: 8
                    })
                    .css({
                        color: '#FFFFFF'
                    })
                    .add();

                setTimeout(function () {
                    label.fadeOut();
                }, 1000);
            }
        },
        zoomType: 'x'
    },

Answer 2

I did further research. I notice that I may have answered my question already in my question. It turns out that the numbers I gave in my question are very helpful, not clueless. Math.ceil(min) and Math.floor(max) are just the beginning and ending index of the data points in the data series that are show up in the zoomed window. The another thing to note is to use afterSetExtremes event. This is the moment where chart finalizes the starting and ending points in the X axis. So the complete answer is:

xAxis: {
  type: 'line',
  events: {
    afterSetExtremes: function(event) {
          var start = Math.ceil(event.min);
          var end = Math.floor(event.max);
      }
  }
}

I am new to Highcharts and love to get corrected if I am wrong.

Cheers.