How can I change google bubble chart bubble color ?.i didnt find any soultion from their api.
I need
Extreme bubble color = 'Red' or color hex code
High bubble color = 'Orange' or color hex code
Medium bubble color = 'yellow' or color hex code
Low bubble color = 'green' or color hex code
I giving api and my test code below.please check and give me a solution. pls help
Google Bubble Chart This is the google bubble chart api link
Test Code Below:
<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(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['core', 'Xscore', 'Yscore', 'Level', 'Size'],
['12.00', 6, 6, 'EXTREME', 4],
['4.84', 2.84, 1.36, 'MEDIUM', 2],
['6.6', 5.6, 1.84, 'HIGH', 3],
['7.73', 5.73, 2.78, 'HIGH', 3],
['7.05', 5.05, 2, 'MEDIUM', 2],
['4.49', 3.49, 1.7, 'LOW', 1],
['9.09', 4.09, 4.77, 'HIGH', 3],
['4.55', 2.55, 2.96, 'LOW', 1],
['4.6', 2.6, 1.54, 'LOW', 1],
['6', 3.6, 2.54, 'MEDIUM', 2],
['7.6', 3.6, 3.54, 'HIGH', 3],
['7.6', 3.6, 3.54, 'HIGH', 3],
['7.7', 3.6, 3.54, 'HIGH', 3],
['10.6', 5.6, 4.54, 'HIGH', 3],
['6.6', 4.6, 1.24, 'MEDIUM', 2],
['3.6', 1.6, 1.34, 'LOW', 1],
['6.6', 1.6, 5.14, 'HIGH', 3],
['7.7', 1.7, 5.54, 'HIGH', 3],
['6.8', 1.8, 4.54, 'HIGH', 3],
['11.6', 5.6, 5.54, 'EXTREME', 4],
['7.09', 5.09, 2.05, 'HIGH', 3]
]);
var options = {
title: '',
backgroundColor: 'transparent',
hAxis: {title: 'Xscore', ticks: [1,2,3,4,5,6], textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
vAxis: {title: 'Yscore', ticks: [1,2,3,4,5,6],textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
bubble: {textStyle: {fontSize: 9,color:'#FFFFFF',auraColor:'none'}},
chartArea:{backgroundColor:'#4c4c4b'},
legend: { position: 'none' },
animation:{easing:'in'}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
</script>
<div class="widget-content shortcuts">
<div id="series_chart_div" style="width: 100%; height: 800px;"></div>
</div>
Try something like this. I dropped the 'Level' column from your data, defined the value/color pairings in the appropriate arrays in colorAxis, and hid the legend for same:
<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(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['core', 'Xscore', 'Yscore', 'Size'],
['12.00', 6, 6, 4],
['4.84', 2.84, 1.36, 2],
['6.6', 5.6, 1.84, 3],
['7.73', 5.73, 2.78, 3],
['7.05', 5.05, 2, 2],
['4.49', 3.49, 1.7, 1],
['9.09', 4.09, 4.77, 3],
['4.55', 2.55, 2.96, 1],
['4.6', 2.6, 1.54, 1],
['6', 3.6, 2.54, 2],
['7.6', 3.6, 3.54, 3],
['7.6', 3.6, 3.54, 3],
['7.7', 3.6, 3.54, 3],
['10.6', 5.6, 4.54, 3],
['6.6', 4.6, 1.24, 2],
['3.6', 1.6, 1.34, 1],
['6.6', 1.6, 5.14, 3],
['7.7', 1.7, 5.54, 3],
['6.8', 1.8, 4.54, 3],
['11.6', 5.6, 5.54, 4],
['7.09', 5.09, 2.05, 3]
]);
var options = {
title: '',
backgroundColor: 'transparent',
hAxis: {title: 'Xscore', ticks: [1,2,3,4,5,6], textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
vAxis: {title: 'Yscore', ticks: [1,2,3,4,5,6],textStyle:{color:'#999',bold:'1'},gridlines: {color: '#696966'},titleTextStyle:{italic:'0'}},
bubble: {textStyle: {fontSize: 9,color:'#FFFFFF',auraColor:'none'}},
colorAxis: {values: [1, 2, 3, 4], colors: ['green', 'yellow', 'orange', 'red'], legend: {position: 'none'}},
chartArea:{backgroundColor:'#4c4c4b'},
legend: { position: 'none' },
animation:{easing:'in'}
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
chart.draw(data, options);
}
</script>
<div class="widget-content shortcuts">
<div id="series_chart_div" style="width: 100%; height: 800px;"></div>
</div>
If this helps, please let me know. Today was my first time using Google Charts and I came here looking for the same info, then figured it out on my own. If there's a better way to do it, I'm eager to learn. :)