Bubble Chart Example

An example of a Google Bubble Chart.

by Alexey Zakharov

HTML

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <div id="series_chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate',     'Population'],
        ['',    80.66,              1.67,        33739900],
        ['',    79.84,              1.36,               81902307],
        ['',    78.6,               1.84,               5523095],
        ['',    72.73,              2.78,      '',    79716203],
        ['',    80.05,              2,         '',         61801570],
        ['',    72.49,              1.7,       '',    73137148],
        ['',    68.09,              4.77,      '',    31090763],
        ['',    81.55,              2.96,      '',    7485600],
        ['',    68.6,               1.54,      '',         141850000],
        ['',    78.09,              2.05,      '',  307007000]
      ]);

      var options = {
        title: 'Correlation between life expectancy, fertility rate ' +
               'and population of some world countries (2010)',
        hAxis: {title: 'Life Expectancy'},
        vAxis: {title: 'Fertility Rate'},
        bubble: {textStyle: {fontSize: 11}},
        colorAxis: {colors: ['yellow', 'red']}
      };

      var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
      chart.draw(data, options);
    }