Handle click event with a 5K+ point in scatter chart - Javascript highcharts

Javascript examples for highcharts:Scatter Chart

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

Description

Handle click event with a 5K+ point in scatter chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function() {/*from  www. ja  v a 2s  . c o m*/
  // Prepare the data
  var data = [],
    n = 8000,
    i;
  for (i = 0; i < n; i += 1) {
    data.push([
      Math.pow(Math.random(), 2) * 100,
      Math.pow(Math.random(), 2) * 100
    ]);
  }
  console.time('scatter');
  console.time('asyncRender');
  $('#container').highcharts({
    chart: {
      zoomType: 'xy'
    },
    xAxis: {
      min: 0,
      max: 100,
      gridLineWidth: 1
    },
    yAxis: {
      // Renders faster when we don't have to compute min and max
      min: 0,
      max: 100,
      minPadding: 0,
      maxPadding: 0
    },
    title: {
      text: 'Scatter chart with ' + Highcharts.numberFormat(data.length, 0, ' ') + ' points'
    },
    legend: {
      enabled: false
    },
    series: [{
      type: 'scatter',
      data: data,
      marker: {
        radius: 5,
        symbol: 'triangle',
        fillColor: 'rgba(128,0,128,1)'
      },
      point: {
        events: {
          click: function() {
            console.log("click");
          }
        }
      },
      tooltip: {
        enable: false,
        followPointer: false,
        pointFormat: '[{point.x:.1f}, {point.y:.1f}]'
      },
      events: {
        renderedCanvas: function() {
          console.timeEnd('asyncRender');
        }
      }
    }]
  });
  console.timeEnd('scatter');
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="height: 500px; width: 600px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials