nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Bubble Chart

spulapalli

Hi,
 
I am creating a bubble chart (type:HTML5) and the size of the bubble is defined by the quantity. I wanted to set the bubble color based on their size, If the quantity is high then color should be dark, and for less quantity color should light. is there anyway that we can set the color ? 
 
I created a sample report and attached here. 
 
I am using Actuate Birt(version BIRT Designer Version 4.2.3.)

Find more posts tagged with

Comments

JFreeman

You can modify the colors of each data point in the beforeRendering of the client scripts on the chart.
For Example:
<pre class="_prettyXprint _lang-js">
beforeRendering: function(options, chart)
{
for(var i=0; i<options.series[0].data.length; i++){
var newPointColor = '#9ecc4c';
if(options.series[0].data[i].z < 100000){
newPointColor = '#c7e298';
}else if(options.series[0].data[i].z > 100000 && options.series[0].data[i].z < 125000){
newPointColor = '#a6d05b';
}else if(options.series[0].data[i].z > 125000 && options.series[0].data[i].z < 175000){
newPointColor = '#8bbb35';
}else if(options.series[0].data[i].z > 175000){
newPointColor = '#5e7e24';
}
updateColor(newPointColor, i);
}

function updateColor(newColor, pointNumber){
options.series[0].data[pointNumber].marker = {
fillColor: newColor
}
}
},
</pre>
I've attached a modified version of your sample for reference.

spulapalli

Thanks a lot Jesse. great help!

JFreeman

I'm glad I could be of assistance.
Let us know if you have any additional questions.

spulapalli

Jesse,
 
Suggested script is working fine for one series. We are doing optional Y series Grouping in report, which generates multiple series. now the requirement is, each series bubbles have unique color and the thickness should be based on the size of the bubble.
ex: 1 series has Red color bubbles. bigger size bubble should have more thickness and the lesser size should have less thickness, and it should be done dynamically(color should not be hard-coded in script), colors are derived from the color palette. 
 
 
I tried but could not get. Please let me know is there anyway that we can do. I attached the sample report for ref.
 
Regards,
Suresh

JFreeman

Looks like you were on the right track just not quite there. I added a function I found that adjusts colors by a percentage lighter or darker so the colors are no longer hard coded but instead generated based on the existing color of the series.
<pre class="_prettyXprint _lang-js">
beforeRendering: function(options, chart)
{
for(j=0;j<chart.getSeriesCount();j++){
for(var i=0; i<options.series[j].data.length; i++){
var seriesZData = options.series[j].data[i].z;
var seriesColor = options.colors[j];
var colorAdjustment = 0;

if(seriesZData > 1000){
colorAdjustment = -0.6; //60% Darker
}else if(seriesZData < 1000 && seriesZData > 990){
colorAdjustment = -0.4; //40% Darker
}else if(seriesZData < 990 && seriesZData > 980){
colorAdjustment = 0.4; //40% Lighter
}else if(seriesZData < 980){
colorAdjustment = 0.6; //60% Lighter
}

updateColor(seriesColor, i, j, colorAdjustment);
}
}

function updateColor(seriesColor, pointNumber, seriesNumber, adjustment){
var newColor = ColorLuminance(seriesColor, adjustment);
options.series[seriesNumber].data[pointNumber].marker = {
fillColor: newColor
}
}

//source for color adjustment function(ColorLuminance): http://www.sitepoint.com/javascript-generate-lighter-darker-color/
function ColorLuminance(hex, lum) {

// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;

// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}

return rgb;
}

},
</pre>
I've also attached a modified version of your sample with this code in place for reference.

spulapalli

Thank you Jesse.

JFreeman

You are welcome.
Let us know if you have any additional questions.