CODEWITHSUNDEEP
javascript
Noelia
Noelia

Reputation: 281

Set the bubble color on a bubble chart based on the value

I have to set the colors of each bubble on a bubble chart based on the number that I have on my array. The only thing that I know is:

So, if one element of the array has the value "2.5" I have to find a color that represents that number in the color scale.

I'm using dojox.charting, but I have no idea how create a function that, based on the value, returns the color.

Any idea will be helpful!!!!

Upvotes: 0

Views: 322

Answers (2)

abc667
abc667

Reputation: 514

function getInterpolation(x, min1, max1, min2, max2) {
    return Math.round(x/(max1-min1)*(max2-min2)+min2);    
}

Use this like getInterpolation(2.5, 0, 3, 0xff, 0xa6); for each RGB component. If you use this frequently in loop you can change min and max to some const values.

Upvotes: 1

runspired
runspired

Reputation: 2693

So here I think you are going to want to do some percentage based math on the numerical rgb values. If you have rgb to hex functions available, take advantage of them, if not:

var r,g,b,rgb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i.exec(color);

if( rgb.length == 5 ) { //argb hex format
    r = parseInt(rgb[2], 16);
    g = parseInt(rgb[3], 16);
    b = parseInt(rgb[4], 16);
    }
else {
    r = parseInt(rgb[1], 16);
    g = parseInt(rgb[2], 16);
    b = parseInt(rgb[3], 16);
}

So for r: 0 is ff and 3 is a6, you'll convert to 0:255 and 3:166 which would put 2.5 at ~181 To get back to Hex to would do 181.toString(16);

Upvotes: 2

Related Questions