move renderer for scatter chart - Javascript highcharts

Javascript examples for highcharts:Scatter Chart

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

Description

move renderer for scatter chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script> 
      <script type="text/javascript">
function genRandom(_min, _max) {//from  w w w  .  j  a va 2  s .co  m
  return Math.floor(Math.random() * (_max - _min + 1)) + _min;
}
$(function() {
  var scatter_data = [];
  for (var i = 0; i < 1000; i++) {
    scatter_data.push([genRandom(8000000, 9000000), genRandom(1, 100)]);
    var s = genRandom(8000000, 9000000);
    var size = genRandom(10000, 50000);
  }
  var chart = Highcharts.chart('container', {
    chart: {
      type: 'scatter',
      zoomType: 'xy',
      events: {
        redraw: function() {
          var xAxis = this.xAxis[0],
              yAxis = this.yAxis[0];
          this.rectangles.forEach(function (rect) {
             var x1 = xAxis.toPixels(rect.start),
                 x2 = xAxis.toPixels(rect.len),
                 y1 = yAxis.toPixels(rect.ystart),
                 y2 = yAxis.toPixels(rect.yend);
            rect.element.attr({
              x: x1,
              y: y2,
              width: x2 - x1,
              height: y1 - y2
            });
          });
        }
      }
    },
    yAxis: [{
      id: 'axis1',
      height: 200,
      offset: 0,
      maxPadding: 0
    }, {
      id: 'axis2',
      height: 95,
      offset: 0,
      maxPadding: 0,
      top: 250,
    }],
    plotOptions: {
      scatter: {
        marker: {
          radius: 5
        }
      }
    },
    series: [{
      name: 'TEST',
      color: 'rgba(223, 83, 83, .5)',
      data: scatter_data,
      yAxis: 'axis1',
    }]
  });
  chart.rectangles = [];
  var rectangle;
  for (var i = 0; i < 10; i++) {
    var start = genRandom(8000000, 9000000);
    var len = start + genRandom(20000, 50000);
    var x1 = chart.xAxis[0].toPixels(start);
    var x2 = chart.xAxis[0].toPixels(len);
    var ystart = 0;
    if ((i % 2) == 0) {
      ystart = 10;
    } else if ((i % 3) == 0) {
      ystart = 20;
    }
    var yend = ystart + 5;
    var y1 = chart.yAxis[0].toPixels(ystart) + 50;
    var y2 = chart.yAxis[0].toPixels(yend) + 50;
    rectangle = {
      start: start,
      len: len,
      ystart: ystart,
      yend: yend,
      element: chart.renderer.rect(x1, y2, x2 - x1, y1 - y2)
        .attr({
          fill: 'blue'
        }).add()
    };
    chart.rectangles.push(rectangle);
  }
});

      </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="min-width: 310px; height: 400px; max-width: 800px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials