Bubble Chart Example

An example of a Google Bubble Chart.

by optionsit

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>

<div id="container" style="width: 900px; height: 500px;">
    <div class="vIco"></div>
    <div class="vLabel high">FORTE</div>
    <div class="vLabel medium">MOYENNE</div>
    <div class="vLabel small">BASSE</div>
    
    <div class="hIco"></div>
    <div class="hLabel high">FORT</div>
    <div class="hLabel medium">MOYEN</div>
    <div class="hLabel small">BAS</div>
    
    
    
     <div id="series_chart_div" style="width: 100%; height: 100%;"> </div> 
</div>

CSS

html{
    font-family: helvetica;    
    
}
#container{
    position:relative;
    
}

.hLabel {
    position:absolute;
    bottom: 75px;    
    z-index:10;
    background: #fff;
    padding:5px 10px;
    border-radius:5px;
    border:1pt solid #ccc;

    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;    
    
    font-size: 0.6em;
    
}

.hLabel.high{
  left:70%;  
}
.hLabel.medium{
  left:50%;  
}
.hLabel.small{
  left:25%;  
}

.vLabel {
    position:absolute;
    right:725px;    
    z-index:10;
    background: #fff;
    padding:5px 10px;
    border-radius:5px;
    border:1pt solid #ccc;

    -ms-transform-origin: 50% 50%; /* IE 9 */
    -webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
    transform-origin: 50% 50%;    
    
    font-size: 0.6em;
    
}

.vLabel.high{
  bottom:70%;  
}
.vLabel.medium{
  bottom:50%;  
}
.vLabel.small{
  bottom:25%;  
}

.vIco{
    width: 50px;
    height: 50px;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    top: 40px;
    left: 136px;
    z-index: 10;
}
.hIco{
    width: 50px;
    height: 50px;
    background: #ccc;
    border-radius: 50%;
    position: absolute;
    bottom: 65px;
    right: 100px;
    z-index: 10;
}

JavaScript

google.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Importance business', 'Niveau d\'attente des parties prenantes', 'Thématique',     'Population'],
        ['CAN',    80.66,              1.67,      'Patrimoine',  5],
        ['DEU',    79.84,              1.36,      'Patrimoine',  5],
        ['DNK',    78.6,               1.84,      'Patrimoine',         5],
        ['EGY',    72.73,              2.78,      'Planète',    10],
        ['GBR',    80.05,              2,         'Planète',         10],
        ['IRN',    72,              1.7,       'Collaborateurs',    10],
        ['IRQ',    83,              4.77,      'Collaborateurs',    15],
        ['ISR',    81.55,              2.96,      'Société',    15],
        ['RUS',    68.6,               1.54,      'Société',         10],
        ['USA',    78.09,              2.05,      'Société',  5]
      ]);

      var options = {
        title: 'Cartographie des enjeux',
          hAxis: { gridlines: {color: '#ccc', count: 3}, minorGridlines : { color: 'red', count : 1 } },
          vAxis: {gridlines: {color: '#ccc', count: 3}, textPosition : 'none' },
        series : {'Patrimoine': {color: 'red'}, 'Planète': {color: 'green'}, 'Collaborateurs': {color: 'blue'}, 'Société': {color: 'orange'}},
        bubble: {textStyle: {fontSize: 11}}
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
        
        google.visualization.events.addListener(chart, 'select', selectHandler); 
    
        function selectHandler(e)     {   
            alert(data.getValue(chart.getSelection()[0].row, 0));
        }
        
    }