set zoom type for bubble chart - Javascript highcharts

Javascript examples for highcharts:Bubble Chart

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

Description

set zoom type for bubble 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-1.10.1.js"></script> 
      <style id="compiled-css" type="text/css">

#content {/*from   ww w.ja v a 2 s .co m*/
   position: relative;
}
#content img {
   position: absolute;
   top: 0px;
   right: 10px;
}


      </style> 
      <script type="text/javascript">
$(function (){
    $('#container').highcharts({
        chart: {
            type: 'bubble',
            zoomType: 'xy'
        },
        title: {
            text: 'Formasi Tenaga Kerja'
        },
        series: [{
            data: [[97,36,1000]],
            name: 'Area Medan'
        }, {
            data: [[25,10,1000]],
            name: 'Area Lubuk Pakam'
        }, {
            data: [[47,47,1000]],
            name: 'Area Binjai'
        }, {
            data: [[75,80,1000]],
            name: 'Area Sibolga'
        }, {
            data: [[60,25,1000]],
            name: 'Area Rantau Prapat'
        }, {
            data: [[100,80,1000]],
            name: 'Area Padang Sidempuan'
        }, {
            data: [[80,55,1000]],
            name: 'Area Nias'
        }, {
            data: [[75,80,1000]],
            name: 'Area Pematang Siantar'
        }]
    });
});

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

Related Tutorials