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

[Former Member]

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.

[TammyPowlas]

Hello - why use CSS?  Why not use the conditional formatting properties that come with the bubble chart?  See below:

[Former Member]

Hi Tammy,

Thank you for your response.

Using conditional formatting, I am able to compare a measure with an integer (say if Budget<10000 then apply Red) but I am not seeing a way to compare between two measures (say if budget<Actual then apply Red).

[TammyPowlas]

Budget balance (Budget less actuals) is a typical calculation from the backend - in most cases, your BEx query

Then you can use the Design Studio conditional formatting feature - if Budget balance is less than 0, color it red

[Former Member]

I use Design studio 1.6 and Universe as source.

In my scenario i use three measure in Bubble chart.

Say Sales, Actual and Budget (just for example)

I need to compare two measure with respect to the third measure (say if budget<actual or sales<actual then apply red to the bubble) .

I tried a similar workaround, i created a measure in universe say "budget and actual comparison" with the calculation "budget - actual" . In the bubble chart if i point to this new measure  (budget and actual comparison = 0 then apply Red) then, no changes is reflecting in the chart. Meaning, conditional formatting is applied only to the measures that is used in the chart (Sales, Actual and Budget) and when i try to apply conditional formatting for another measure (budget and actual comparison) it is not reflected in chart.

[TammyPowlas]

That seems like an unusual requirement to me - to have conditional formatting on something you are not displaying.  What is the business reason behind this?  I have not heard of something like this

[Former Member]

Yeah Tammy. I am not pointing that measure in chart but the purpose of the measure is to compare budget, actual and Sales in the chart.

Say if budget<actual or sales < actual then apply red 

      if budget>actual or sales < actual then apply Green

      if budget<actual or sales = actual then apply amber

[TammyPowlas]

In this case, SAP Lumira may be a better fit; it has calculation features for you to do this logic, and works against the universe

[Former Member]

Sorry Tammy, here the requirement need to be achieved using Design Studio.

I tried using coding too which i have mentioned in my first post but i am not able to achieve all the three colors in chart as i use IF loop.