1

I'm drawing a google scatter(ScatterChart) plot and I have many bubbles with the same size , color , position which overlap. In google bubble chart , the overlapping bubbles automatically change color in order to notify user. But in scatter chart the top bubble's color is shown.

Note: I cant use bubble chart since I need customized tooltip.

Note: I cant use google scatter(Scatter) chart since I want to size the bubbles dynamically.

Any Idea how to solve this?

here is my code:

function drawChart() {

        var data = new google.visualization.DataTable();
            data.addColumn('number', 'Probabilità');
            data.addColumn('number', 'Impact Rate');
            data.addColumn({'type': 'string', 'role': 'style'} );
            data.addColumn({type:'string', role:'annotation'});
            data.addColumn({type: 'string', role: 'tooltip'});

            data.addRows([
            [3, 2, 'point {size: 10;fill-color:blue}', 'a','c'],[3,2,'point {size: 10;fill-color:blue}','b','d']
            ]);

        var options = {
            title: 'Rischio Finanziario',
            hAxis: {title: 'Probabilità', ticks: [0.5,1,1.5,2,2.5,3,3.5], textStyle:{color:'#999',bold:'1'}},
            vAxis: {title: 'Impact Rate', ticks: [0.5,1,1.5,2,2.5,3,3.5],textStyle:{color:'#999',bold:'1'}},

            height: 500,
            chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
            legend: {position: 'none'},
            colorAxis: {legend: {position: 'none'}},
            bubble: {textStyle: {fontSize: 11}},
            animation:{easing:'in'},
        };

        if (data.getNumberOfRows() > 0) {
            var chart = new google.visualization.ScatterChart(document.getElementById('drawChart'));

            chart.draw(data, options);
        } else {
            document.getElementById('drawChart').innerHTML = '<div><h4 style="color: black;margin-top: 2rem;">Hello World</h4></div>No Data'
        }
    }

This is a simplified version. In reality I get data dynamically with jinja with a for loop

WhiteHat
  • 59,912
  • 7
  • 51
  • 133
Ehsan
  • 711
  • 2
  • 7
  • 21
  • With scatter chart, you can change size of point with style role – WhiteHat Jul 19 '20 at 15:34
  • @WhiteHat I used it with point and pointSize but no change. Only I could manage to change all the points with the same size for all. Do you have a sample code for that? – Ehsan Jul 19 '20 at 18:42
  • @WhiteHat based on https://stackoverflow.com/questions/26091711/google-scatter-charts-different-point-size it is impossible to use style for Scatter charts. I couldnt figure it out too. – Ehsan Jul 19 '20 at 19:40

1 Answers1

1

With scatter chart, you can change size of point with style role.

you already have it defined correctly in the posted example.

point {size: 10; fill-color:blue}

if you want the points to be a different size,
just change the size attribute.

point {size: 20; fill-color:blue}

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Probabilità');
  data.addColumn('number', 'Impact Rate');
  data.addColumn({'type': 'string', 'role': 'style'} );
  data.addColumn({type:'string', role:'annotation'});
  data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    [3, 2, 'point {size: 20; fill-color: red}', 'a', 'c'],
    [3, 2, 'point {size: 10; fill-color: blue}', 'b', 'd']
  ]);

  var options = {
    title: 'Rischio Finanziario',
    hAxis: {title: 'Probabilità', ticks: [0.5,1,1.5,2,2.5,3,3.5], textStyle:{color:'#999',bold:'1'}},
    vAxis: {title: 'Impact Rate', ticks: [0.5,1,1.5,2,2.5,3,3.5],textStyle:{color:'#999',bold:'1'}},
    height: 500,
    chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
    legend: {position: 'none'},
    colorAxis: {legend: {position: 'none'}},
    bubble: {textStyle: {fontSize: 11}},
    animation:{easing:'in'},
  };

  if (data.getNumberOfRows() > 0) {
    var chart = new google.visualization.ScatterChart(document.getElementById('drawChart'));
    chart.draw(data, options);
  } else {
    document.getElementById('drawChart').innerHTML = '<div><h4 style="color: black;margin-top: 2rem;">Hello World</h4></div>No Data'
  }
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="drawChart"></div>

if you want to deal with the overlapping annotations,
you can use multiple series' or data table columns,
then change the length of the annotation stem for each series.

series: {
  0: {
    annotations: {
      stem: {
        length: 26
      }
    }
  },
  1: {
    annotations: {
      stem: {
        length: 12
      }
    }
  }
},

see following working snippet...

google.charts.load('current', {
  packages: ['corechart']
}).then(drawChart);

function drawChart() {
  var data = new google.visualization.DataTable();
  data.addColumn('number', 'Probabilità');
  data.addColumn('number', 'Impact Rate');
  data.addColumn({'type': 'string', 'role': 'style'} );
  data.addColumn({type:'string', role:'annotation'});
  data.addColumn({type: 'string', role: 'tooltip'});
  data.addColumn('number', 'Impact Rate');
  data.addColumn({'type': 'string', 'role': 'style'} );
  data.addColumn({type:'string', role:'annotation'});
  data.addColumn({type: 'string', role: 'tooltip'});

  data.addRows([
    [3, 2, 'point {size: 20; fill-color: red}', 'a', 'c', null, null, null, null],
    [3, null, null, null, null, 2, 'point {size: 10; fill-color: blue}', 'b', 'd']
  ]);

  var options = {
    series: {
      0: {
        annotations: {
          stem: {
            length: 26
          }
        }
      },
      1: {
        annotations: {
          stem: {
            length: 12
          }
        }
      }
    },
    title: 'Rischio Finanziario',
    hAxis: {title: 'Probabilità', ticks: [0.5,1,1.5,2,2.5,3,3.5], textStyle:{color:'#999',bold:'1'}},
    vAxis: {title: 'Impact Rate', ticks: [0.5,1,1.5,2,2.5,3,3.5],textStyle:{color:'#999',bold:'1'}},
    height: 500,
    chartArea:{left:"10%",top:"10%",width:"80%",height:"80%"},
    legend: {position: 'none'},
    colorAxis: {legend: {position: 'none'}},
    bubble: {textStyle: {fontSize: 11}},
    animation:{easing:'in'},
  };

  if (data.getNumberOfRows() > 0) {
    var chart = new google.visualization.ScatterChart(document.getElementById('drawChart'));
    chart.draw(data, options);
  } else {
    document.getElementById('drawChart').innerHTML = '<div><h4 style="color: black;margin-top: 2rem;">Hello World</h4></div>No Data'
  }
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="drawChart"></div>
WhiteHat
  • 59,912
  • 7
  • 51
  • 133
  • thanks, maybe I didnt explain well. I have the circles with the same, size, color, and position. they overlap. I have a default color for all points, now I want if there are overlaps this color changes to notify user for existence of overlap or at least in some way I can show that there is an overlap. in bubble chart the color slightly fades and so user can understand that. but in scatter only the top circle's color is shown. This is the problem. also the annotations overlap too. and since maybe sometimes there are more than 4 exact points that overlap, series solution is not feasible. – Ehsan Jul 20 '20 at 12:59
  • 1
    sure, there are no options that will do all this for you. and you can have as many series as necessary. sounds like you need a routine to determine which points will overlap, before drawing the chart. this will allow you to determine if a new series is needed for that point. and you can also add an opacity attribute to the style, in order to show a point as faded. – WhiteHat Jul 20 '20 at 13:15
  • Do you know another library that is simple like google visualisation and can do what I want. for example TUI chart is doing the fading but no very well documentation to adopt to my code. – Ehsan Jul 20 '20 at 14:01
  • 1
    no, sorry, primarily work with google charts, have limited experience with chart.js – WhiteHat Jul 20 '20 at 14:37