Bubble Chart Example

An example of a Google Bubble Chart.

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', 'Accuracy Percentile', 'Coverage: Count Various Indicators', 'Points per Estimate', 'Estimates'],
          ['4TREND.CH', 0.71, 27, 21.82, 147],
          ['PNC Financial', 0.63, 17, 19.43, 131],
          ['PNC Financial', 0.63, 17, 19.43, 131],
          ['Morgan Stanley', 0.57, 14, 18.88, 48],
          ['Wells Fargo', 0.59, 16, 18.63, 80],
          ['TD Securities', 0.60, 22, 18.22, 122],
          ['BMO Capital', 0.56, 22, 16.23, 284],
          ['Societe Generale', 0.47, 22, 12.47, 244],
          ['Scotiabank', 0.50, 21, 13.19, 70],
          ['RBC Economics', 0.51, 20, 14.11, 254],
        ]);

        var options = {

          title: 'ALL TIME RANKING US ECONOMIC INDICATORS: Points per Estimates (Color) resp. Accuracy Percentile, Coverage, and Number of Estimates [Source: Estimize.com]',
          hAxis: {
            title: 'Accuracy Percentile'
          },
          vAxis: {
            title: 'Coverage: Count Indicators'
          },
          bubble: {
            textStyle: {
              fontSize: 12
            }
          }

        };



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

      }