CODEWITHSUNDEEP
javascriptchartscolorsgoogle-visualization
webpic
webpic

Reputation: 443

google visualization bubble chart change legend color based on value

I have implemented google bubble chart its working fine but i need to chanage bubble/legend color based Area value.

<html>
   <head>
      <title>Google Charts Tutorial</title>
      <script type = "text/javascript" src = "https://www.gstatic.com/charts/loader.js">
      </script>
      <script type = "text/javascript">
         google.charts.load('current', {packages: ['corechart']});     
      </script>
   </head>

   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto">
      </div>
      <script language = "JavaScript">
         function drawChart() {

               var data = google.visualization.arrayToDataTable([
        ['ID', 'Life Expectancy', 'Fertility Rate', 'Area',     ],
        ['CAN',    80.66,              1.67,      'Europe',],
        ['DEU',    79.84,              1.36,      'Europe'        ],
        ['IRN',    72.49,              1.7,       'Middle East'    ],
        ['IRQ',    68.09,              4.77,      'Middle East'    ],
        ['ISR',    81.55,              2.96,      'Middle East'   ],
        ['RUS',    68.6,               1.54,      'Europe',         ],
        ['USA',    78.09,              2.05,      'North America']
      ]);

            // Set chart options
            var options = {
               'title':'Age vs Weight',
                'width':550,
               'height':400,
                legend: { 
                  position : 'right'
               },
               colors: ['green', 'yellow','red','black']
            };

            // Instantiate and draw the chart.
            var chart = new google.visualization.BubbleChart(document.getElementById('container'));
            chart.draw(data, options);
         }
         google.charts.setOnLoadCallback(drawChart);


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

      </script>
   </body>
</html>

curretly color is set but its random color set. I want set Europe as red, Middle East as green and North America as yellow

I'm not able to find option for Visualization : bubble chart but for Column Chart there is working eg. 

var data = google.visualization.arrayToDataTable([
         ['Element', 'Density', { role: 'style' }],
         ['Copper', 8.94, '#b87333'],            // RGB value
         ['Silver', 10.49, 'silver'],            // English color name
         ['Gold', 19.30, 'gold'],

       ['Platinum', 21.45, 'color: #e5e4e2' ], // CSS-style declaration
      ]);

is there any similar option for bubble chart adding style in array

Upvotes: 1

Views: 728

Answers (1)

WhiteHat
WhiteHat

Reputation: 61222

the data format for the BubbleChart does not allow for column roles, such as 'style'

however, you can control the color assignment using the colors option.

the colors in the colors array, should be in the same order as the series appear in the data.

since 'Europe' appears first, 'Middle East' second, and last 'North America',
the colors should be in the following order... 

colors: ['red', 'green', 'yellow']

see following working snippet... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['ID', 'Life Expectancy', 'Fertility Rate', 'Area'],
    ['CAN', 80.66, 1.67, 'Europe'],
    ['DEU', 79.84, 1.36, 'Europe'],
    ['IRN', 72.49, 1.70, 'Middle East'],
    ['IRQ', 68.09, 4.77, 'Middle East'],
    ['ISR', 81.55, 2.96, 'Middle East'],
    ['RUS', 68.6,  1.54, 'Europe'],
    ['USA', 78.09, 2.05, 'North America']
  ]);

  // Set chart options
  var options = {
    title: 'Age vs Weight',
    width: 550,
    height: 400,
    legend: {
      position : 'right'
    },
    colors: ['red', 'green', 'yellow']
  };

  var chart = new google.visualization.BubbleChart(document.getElementById('container'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>

EDIT

to handle dynamic data, use an object to map the colors to the area... 

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var data = google.visualization.arrayToDataTable([
    ['ID', 'Life Expectancy', 'Fertility Rate', 'Area'],
    ['USA', 78.09, 2.05, 'North America'],
    ['IRN', 72.49, 1.70, 'Middle East'],
    ['CAN', 80.66, 1.67, 'Europe'],
    ['DEU', 79.84, 1.36, 'Europe'],
    ['IRQ', 68.09, 4.77, 'Middle East'],
    ['ISR', 81.55, 2.96, 'Middle East'],
    ['RUS', 68.6,  1.54, 'Europe'],
  ]);

  var colorMap = {
    'Europe': 'red',
    'Middle East': 'green',
    'North America': 'yellow'
  };
  var colors = [];

  for (var i = 0; i < data.getNumberOfRows(); i++) {
    var area = data.getValue(i, 3);
    if (colors.indexOf(colorMap[area]) === -1) {
      colors.push(colorMap[area]);
    }
  }

  var options = {
    title: 'Age vs Weight',
    width: 550,
    height: 400,
    legend: {
      position : 'right'
    },
    colors: colors
  };

  var chart = new google.visualization.BubbleChart(document.getElementById('container'));
  chart.draw(data, options);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="container"></div>

Upvotes: 1

Related Questions