Skip to Content
avatar image
Former Member

Generation of CSS for column format in InfoChart

Hi, I thank you for helping me with the following case. I have a data table which I have drawn in an Info Chart and that I use to track a real vs. A production Goal. I want to paint the color of the column representing the Actual Green or Red Production according to whether it is Greater or Less than the Target Production. For this I use a DataIterator I make the comparison of the values and I generate the CSS chain to paint the columns of the graph. I know how to do it to paint compared to a fixed value, but I could not perform the comparison with a variable that comes from the same data source. Annex Script of the Dataiterator that compares with a fixed value.

var rows = DI_1.getRows();

var dimensions = DI_1.getDimensions();

var measures = DI_1.getMeasures();

var valueIndex = measures.atIndex(1).key; var strclassName = "";

var x_val = 0.0; var x_Index_Col = 0;

var x_col_null = 0;

APPLICATION.createWarningMessage("rows: "+rows.length);

APPLICATION.createWarningMessage("dimensions: "+dimensions.length);

APPLICATION.createWarningMessage("measures: "+measures.length);

rows.forEach(function(row, rIndex) {

dimensions.forEach(function(dimE, dIndex) {

var str_Dim = row.getDimensionValueKey(dimE.key);

var str_val = row.getMeasureFormattedValue(valueIndex);

if (me.isNull(row.getMeasureValue(valueIndex)) || str_val=="null") {

x_val = 0.0;

x_col_null = x_col_null + 1;

} else {

x_val = Convert.stringToFloat(str_val);

x_Index_Col = rIndex + 1 - x_col_null;

if (x_val > 63000000 ) {

strclassName = strclassName + "chartColumn"+x_Index_Col+"r ";

} else {

strclassName = strclassName + "chartColumn"+x_Index_Col+"v ";

}

}

}); });

INFOCHART_1.setCSSClass(strclassName);

Best Regards,

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Jun 20, 2017 at 09:27 AM

    Hi Jorge,

    Assuming you have selected only the data required for your chart, as shown in the example below, you can simplify the script code in the "On Data Change" event of the Data Iterator as follows:

    Data:

    Script Code:

    var measures = me.getMeasures();
    var rows = me.getRows();
    
    var actualMeasure = measures[0];
    var actualMeasureKey = actualMeasure.key;
    
    var targetMeasure = measures[1];
    var targetMeasureKey = targetMeasure.key;
    
    var actualValue = 0.0;
    var targetValue = 0.0;
    
    var strClassName = "";
    
    var colIndex = 0;
    
    rows.forEach(function(row, index) {
      
      colIndex = index +1;
    
      actualValue = row.getMeasureValue(actualMeasureKey);
      targetValue = row.getMeasureValue(targetMeasureKey);
      
      if (actualValue > targetValue) {
      	
      	strClassName = strClassName + "chartColumn" + colIndex + "r ";
      	
      } else {
      	
      	strClassName = strClassName + "chartColumn" + colIndex + "v ";
      	
      }
      
    });
    
    INFOCHART_1.setCSSClass(strClassName);
    

    CSS Code:

    /* Override chart column fill colour for each column */
    
    /* Column 1 r/v */
    
    
    .chartColumn1r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect 
    {    
       fill: green;   
    }
    
    .chartColumn1v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(2) rect 
    {    
       fill: red;   
    }
    
    /* Column 2 r/v */
    
    .chartColumn2r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(3) rect 
    {    
       fill: green;   
    }
    
    .chartColumn2v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(3) rect 
    {    
       fill: red;   
    }
    
    /* Column 3 r/v */
    
    .chartColumn3r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(4) rect 
    {    
       fill: green;   
    }
    
    .chartColumn3v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(4) rect 
    {    
       fill: red;   
    }
    
    /* Column 4 r/v */
    
    .chartColumn4r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(5) rect 
    {    
       fill: green;   
    }
    
    .chartColumn4v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(5) rect 
    {    
       fill: red;   
    }
    
    /* Column 5 r/v */
    
    .chartColumn5r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(6) rect 
    {    
       fill: green;   
    }
    
    .chartColumn5v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(6) rect 
    {    
       fill: red;   
    }
    
    /* Column 6 r/v */
    
    .chartColumn6r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(7) rect 
    {    
       fill: green;   
    }
    
    .chartColumn6v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(7) rect 
    {    
       fill: red;   
    }
    
    /* Column 7 r/v */
    
    .chartColumn7r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(8) rect 
    {    
       fill: green;   
    }
    
    .chartColumn7v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(8) rect 
    {    
       fill: red;   
    }
    
    /* Column 8 r/v */
    
    .chartColumn8r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(9) rect 
    {    
       fill: green;   
    }
    
    .chartColumn8v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(9) rect 
    {    
       fill: red;   
    }
    
    /* Column 9 r/v */
    
    .chartColumn9r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(10) rect 
    {    
       fill: green;   
    }
    
    
    .chartColumn9v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(10) rect 
    {    
       fill: red;   
    }
    
    /* Column 10 r/v */
    
    .chartColumn10r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(11) rect 
    {    
       fill: green;   
    }
    
    .chartColumn10v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(11) rect 
    {    
       fill: red;   
    }
    
    
    /* Column 11 r/v */
    
    .chartColumn11r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(12) rect 
    {    
       fill: green;   
    }
    
    .chartColumn11v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(12) rect 
    {    
       fill: red;   
    }
    
    /* Column 12 r/v */
    
    .chartColumn12r g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(13) rect 
    {    
       fill: green;   
    }
    
    .chartColumn12v g.v-m-main g.v-m-plot g.v-plot-main g.v-datapoint-group .v-datapoint:nth-child(13) rect 
    {    
       fill: red;   
    }
    
    /* Add more columns as needed */
    

    And the result:

    Regards,

    Mustafa.

    Add comment
    10|10000 characters needed characters exceeded

  • Jun 19, 2017 at 06:26 AM

    Hi Jorge,

    Can you share your screen shots for more detail.

    Regards,

    Vidhya.C

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jun 19, 2017 at 07:15 AM

    Hi Jorge.

    If I don't get it wrong,you want to set the column in different colors according to there values.Maybe you can try this:

    Method 1:create an SAPUI5 model application in SAP design studio ,and use chart component to banding your datasource,and set conditional formatting.

    Method 2:if your application is SAPUI5 M,you can use Analysis Office to set conditional formatting,and used in design studio.

    https://blogs.sap.com/2014/01/14/activating-conditional-formatting-from-analysis-office-to-design-studio/

    https://blogs.sap.com/2015/12/20/design-studio-functions-from-analysis-office-22-smart-copy-with-hana-backend/

    Regards.

    Jing

    Add comment
    10|10000 characters needed characters exceeded