Handle chart selection event - Javascript highcharts

Javascript examples for highcharts:Chart Event

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Event

Description

Handle chart selection event

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Stock Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.js"></script> 
      <script type="text/javascript">
function getPosition(date_utc, serie) {
    var begin = 0,                // first position
        end = serie.length -1,    // last position
        middle;//from   ww w.j a va2s.  co m
    if (date_utc <= serie[begin][0]) return begin;
    if (date_utc >= serie[end][0]) return end;
    while (end - begin > 1) {
        middle = begin + Math.floor((end - begin) / 2.0);
        if (date_utc < serie[middle][0]) end = middle;
        if (date_utc >= serie[middle][0]) begin = middle;
    }
    return begin;
}
$(function() {
    var chart2 = null,
        chart = new Highcharts.StockChart({
        chart: {
            renderTo: 'container',
            zoomType: 'x',
            events: {
                selection: function(event) {
                    // get the position of the selected range
                    var firstPosition = getPosition(parseInt(event.xAxis[0].min), chart.series[0].options.data),
                        lastPosition = getPosition(parseInt(event.xAxis[0].max), chart.series[0].options.data),
                        newSeries = [];
                    // prepare new series
                    jQuery.each(chart.series, function(seriePosition, serie) {
                        if(serie.name == 'Navigator') return;
                        newSeries.push({
                            'id': serie.index,
                            'name': serie.options.name,
                            'type': serie.type,
                            'data': serie.options.data.slice(firstPosition, lastPosition + 1) //get data
                        });
                    });
                    // set the options to the new chart
                    chart2 = new Highcharts.StockChart({
                        chart: {
                            renderTo: 'container2'
                        },
                        series: newSeries
                    });
                }
            }
        },
        rangeSelector: {
            selected: 1
        },
        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <div id="container" style="height: 400px; min-width: 600px"></div> 
      <div id="container2" style="height: 400px; min-width: 600px"></div> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <script type="text/javascript" src="https://www.highcharts.com/samples/data/usdeur.js"></script>  
   </body>
</html>

Related Tutorials