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

Adblocker detected! Please consider reading this notice.

We've detected that you are using AdBlock Plus or some other adblocking software which is preventing the page from fully loading.

We don't have any banner, Flash, animation, obnoxious sound, or popup ad. We do not implement these annoying types of ads!

We need money to operate the site, and almost all of it comes from our online advertising.

Please add wikitechy.com to your ad blocking whitelist or disable your adblocking software.

×