Bubble Chart Example

An example of a Google Bubble Chart.

HTML

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1.1','packages':['corechart']}]}"></script>
       <div id="series_chart_div" style="width: 900px; height: 500px;"></div>

JavaScript

google.setOnLoadCallback(drawSeriesChart);

    function drawSeriesChart() {

      var data = google.visualization.arrayToDataTable([
        ['Year', 'Total assets of failed banks', 'Total costs',   'Period',   'Number of bank failures'],
        ['2008',    1677987474,	18306136,'Crisis',	30   ],
        ['2009',    2087191343,	29745993,'Crisis',	148],
        ['2010',    92084987,	17672427,'Post-Crisis',	157],
        ['2011',    34922997,	7188532,'Post-Crisis',	92],
        ['2012',    11617348,	2675851,'Post-Crisis',	51],
        ['2013',    6044051,	1334471,'Post-Crisis',	24],
        ['2014',    2913503,	438926,'Post-Crisis',	18],
        ['2015',    6421059,	6421059,'2015',	6],]);

      var options = {
        title: 'Correlation between assets of failed banks and costs of closings',
        hAxis: {title: 'Total assets of failed banks'},
        vAxis: {title: 'Total costs'},
        bubble: {textStyle: {fontSize: 9}},
colors: ['blue','grey', '33FFFF'],   'width':700,
                     'height':480   };

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