Skip to Content
0
Former Member
Jan 19, 2016 at 09:21 AM

How to Change the Color of bubble in Bubble Chart based on Conditions?

102 Views

I need clarity in a concepts dealing with Bubble Chart in Design Studio. Kindly help me if u can find a solution for my question.


The bubble chart color must be Red,Green and Amber based on condition.

Say if a<b then apply Red

if a=b then apply amber

if a>b then apply green.


The chart must look like,

The code I have used is :

On start up :

var bubblearray=DS_1.getMembers("_ojscILk7EeWD3JNEOE9D0Q",100);

bubblearray.forEach(function(arr1, index)

{

if( DS_1.getDataAsString("_onjBYLk7EeWD3JNEOE9D0Q",{"_ojscILk7EeWD3JNEOE9D0Q":arr1.externalKey} )

<

DS_1.getDataAsString("_om9ykLk7EeWD3JNEOE9D0Q",{"_ojscILk7EeWD3JNEOE9D0Q":arr1.externalKey}) )

{

CHART_1.setCSSClass("chart-bubble-red");

}

if( DS_1.getDataAsString("_onjBYLk7EeWD3JNEOE9D0Q",{"_ojscILk7EeWD3JNEOE9D0Q":arr1.externalKey} )

>

DS_1.getDataAsString("_om9ykLk7EeWD3JNEOE9D0Q",{"_ojscILk7EeWD3JNEOE9D0Q":arr1.externalKey}) )

{

CHART_1.setCSSClass("chart-bubble-green");

}

if( DS_1.getDataAsString("_onjBYLk7EeWD3JNEOE9D0Q",{"_ojscILk7EeWD3JNEOE9D0Q":arr1.externalKey} )

==

DS_1.getDataAsString("_om9ykLk7EeWD3JNEOE9D0Q",{"_ojscILk7EeWD3JNEOE9D0Q":arr1.externalKey}) )

{

CHART_1.setCSSClass("chart-bubble-amber");

}

});

CSS Code :


chart-bubble-green g.v-m-main g.v-m-plot .v-datapoint.v-morphable-datapoint

{fill: green;}

.chart-bubble-red g.v-m-main g.v-m-plot .v-datapoint.v-morphable-datapoint

{fill: red;}

.chart-bubble-amber g.v-m-main g.v-m-plot .v-datapoint.v-morphable-datapoint:nth-child(1)

{fill: #FFC200;}

My Output :

Either of the statement (if statement) gets executed but not all the condition and CSS code gets affected in the chart simultaneously.



Attachments

output.JPG (43.3 kB)