bubble horizontal stacking in bubble chart - Javascript highcharts

Javascript examples for highcharts:Bubble Chart

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

Description

bubble horizontal stacking in bubble 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"> 
      <style id="compiled-css" type="text/css">

#container {//from   www . j a va 2  s . c o  m
   min-width: 310px;
   max-width: 800px;
   height: 400px;
   margin: 0 auto
}


      </style> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <div id="container"></div> 
      <script type="text/javascript">
Highcharts.chart('container', {
    chart: {
        events: {
            load: function() {
                var bubble = this.series[0],
                    yAxis = this.yAxis[0],
                    base = yAxis.toPixels(0),
                    xVal = 0,
                    radius,
                    newY = 0;
                Highcharts.each(bubble.points, function(p, i) {
                    if (p.x !== xVal) {
                        xVal = p.x;
                        newY = 0;
                    }
                    radius = p.marker.radius;
                    newY += yAxis.toValue(base - radius)
                    p.update({
                        y: newY
                    });
                    newY += yAxis.toValue(base - radius);
                });
            }
        }
    },
    yAxis: {
        min: 0,
        max: 5
    },
    series: [{
        type: 'bubble',
        data: [
            [0, 0, 10],
            [0, 0, 20],
            [0, 0, 15],
            [0, 0, 12],
            [0, 0, 20],
            [0, 0, 15],
            [1, 0, 11],
            [1, 0, 12],
            [1, 0, 13],
            [1, 0, 14],
            [1, 0, 16],
            [1, 0, 15]
        ]
    }]
});

      </script>  
   </body>
</html>

Related Tutorials