Overlapping point in Bubble Chart

Cicely Behne

unread,

Jul 24, 2014, 11:48:55 AM7/24/14

to google-visua...@googlegroups.com

I have used the Google Bubble Chart to create a risk assessment chart. Code is below. Whenever the Impact and Probability of a risk ID are the same, you can only see the top one. How can I show there are two in the same spot?

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Risk ID', 'Impact', 'Probability', 'Color'],
          ['4',    5,              25, 'Risk ID'],
          ['5',    5,              41, 'Risk ID'],
          ['6',    2,              50, 'Risk ID'],
          ['7',    2,              50, 'Risk ID']
        ]);

        var options = {
          title: 'Risk Assessment',
          hAxis: {title: 'Impact', ticks: [0,2,4,6,8,10]},
          vAxis: {title: 'Probability', ticks: [0,20,40,60,80,100]},
          bubble: {opacity: 0},
          backgroundColor: 'none',
          fontSize: '10px',
          fontName: 'Arial',
          bubble: {textStyle: {fontSize: 12}},
          series: {'Risk ID': {color: 'white', visibleInLegend: 0}},
          sizeAxis: {maxSize: 15}
        };

        var chart = new google.visualization.BubbleChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
	  <div id='brand_div'>
	    <div id='chart_div' style="width: 1200px; height: 500px;"></div>
	  </div>
  </body>
</html>

Andrew Gallant

unread,

Jul 24, 2014, 2:47:14 PM7/24/14

to google-visua...@googlegroups.com

You can use a size column to change the size of bubbles, which can indicate when you have multiple values at a given point. Example: http://jsfiddle.net/asgallant/LqQrE/

Cicely Behne

unread,

Jul 24, 2014, 2:49:58 PM7/24/14

to google-visua...@googlegroups.com

Hrm. Ok. I'm using this on a SharePoint site and am pulling in the data dynamically, so I suppose I could write some extra code to check for duplicates and assign a different size for each one... meh, I'll think of something. Thanks for this.

pangatz

unread,

Nov 15, 2016, 2:04:30 PM11/15/16

to Google Visualization API

Hi CeBe, can you please share the code you create to check for duplicates and assign a different size for each, i have the same problem with overlapping point
Thanks in Advance

Reply all

Reply to author

Forward