Google Charts - Google Charts tutorial - Basic Bubble Chart - chart js - google graphs - google charts examples




What is Basic Bubble Chart?

  • A bubble chart is used to visualize a data set having two to four dimensions.
  • The first two dimensions are visualized as coordinates, the third as color and the fourth as size.

Configurations:

We've used BubbleChart class to show bubble based chart.

//bubble chart
var chart = new google.visualization.BubbleChart(document.getElementById('container'));
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Loading:

The google.charts.load package name is "corechart".

google.charts.load("current", {packages: ["corechart"]});
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

The visualization's class name is google.visualization.BubbleChart.

var visualization = new google.visualization.BubbleChart(container);
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team
 learn google charts  tutorial - Bubble Charts - google charts

learn google charts tutorial - Bubble Charts - google charts

Data Format:

Rows: Each row in the table represents a single bubble.

Columns:

Category Column 0 Column 1 Column 2 Column 3 (optional) Column 4 (optional)
Purpose: ID (name) of
the bubble
X coordinate Y coordinate Either a series ID or a value
representing a color on a gradient
scale, depending onthe column type:
string
A string that identifies
bubbles in the same series.
Use the same value to identify
all bubbles that belong
to the same series;
bubbles in the same series will be
assigned the same color. Series can be
configured using the series option.
number
A value that is mapped to an actual
color on a gradient scale using
the colorAxis option.
Size; values in this column are mapped to
actual pixel values using the sizeAxisoption.
Data Type: string number number string or number number

Color By Numbers in bubble chart:

You can use the colorAxis option to color the bubbles in proportion to a value, as shown in the example below.

 Tryit<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['ID', 'X', 'Y', 'Temperature'],
          ['',   80,  167,      120],
          ['',   79,  136,      130],
          ['',   78,  184,      50],
          ['',   72,  278,      230],
          ['',   81,  200,      210],
          ['',   72,  170,      100],
          ['',   68,  477,      80]
        ]);

        var options = {
          colorAxis: {colors: ['yellow', 'red']}
        };

        var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>
Clicking "Copy Code" button to copy the code. From - google charts tutorial - team

Output:


Related Searches to Google Charts - Basic Bubble Chart