Ability to create conditional format icon set

Yup it is a shame we no longer support this.

I've logged an official enhancement request to get this looked at for a future release.

Any updates will be posted here.

Thanks,

David

Yes would love to have this feature back :)

Unfortunately we do not have current plans to implement this feature.

However it's worth noting that this ability was available previously as our icon set was limited.

However in 7.3 and later releases, we have a crazy amount of options for conditional format icons and options.

E.g

If this item does get picked up at a later date I'll let you know.

Though until then hope you can find something in the current set.

Regards,David

I would like the ability to do this as well. I have a use case for which this has been requested to visualize different issues related to very specific networking issues that none of these stock icons can represent.

I see this is couple years old, so hoping there may have been some update/additional requests for this. Please let me know.

Thanks

Hi Dillion,

You can achieve this using a javascript chart and creating the calculations for the conditional formatting yourself.

A very very basic example using fontawesome pro icons...Same principle could be applied to a more complex JS visualisation.

JS for above example is below (this isn't a guide on how to create javascript charts in Yellowfin, just a quick & dirty example)

The CSS for this is too basic to bother including, it just sets the colour & centres the table.

Note the use of formatted_data for the cell text and raw_data for the evaluation.

processData = function(dataset) {

   // Data is in the dataset in a column based format, where each column has an array of data
   // eg. dataset.column_name[0].raw_data, dataset.column_name[0].formatted_data
   return dataset;

},

doDrawing = function(data, $chartDiv, height, width, errorFunction) {
    $chartDiv.append(
        '<link rel="stylesheet" href="/path_to_icon_css/all.min.css">'+
        '<table id="rit-ex">' +
            '<tbody>' +
                '<tr>' +
                    '<td>Month</td>' +
                    '<td>Amount</td>' +
                    '<td>Indicator</td>' +
                '</tr>' +
              '<tr>' +
                '<td class="month1"></td>' +
                '<td class="amount1"></td>' +
                '<td class="indicator1"></td>' +
              '</tr>' +
            	  '<tr>' +
                '<td class="month2"></td>' +
                '<td class="amount2"></td>' +
                '<td class="indicator2"></td>' +
              '</tr>' +
            	  '<tr>' +
                '<td class="month3"></td>' +
                '<td class="amount3"></td>' +
                '<td class="indicator3"></td>' +
              '</tr>' +
            	  '<tr>' +
                '<td class="month4"></td>' +
                '<td class="amount4"></td>' +
                '<td class="indicator4"></td>' +
              '</tr>' +
            	  '<tr>' +
                '<td class="month5"></td>' +
                '<td class="amount5"></td>' +
                '<td class="indicator5"></td>' +
              '</tr>' +
            	  '<tr>' +
                '<td class="month6"></td>' +
                '<td class="amount6"></td>' +
                '<td class="indicator6"></td>' +
              '</tr>' +
            '</tbody>' +
        '</table>'
    );
    let x = 1;
    data.month.forEach(valueObject => {
       $('.month' + x).text(valueObject.formatted_data);
       x++;
    });
    x = 1;
    data.totaloverdue.forEach(valueObject => {
       $('.amount' + x).text('£' + valueObject.formatted_data);
       // Conditional formatting calculations here.
       if(valueObject.raw_data === 2002413.98){
           $('.indicator' + x).append('<i class="fal fa-network-wired orange"></i>');
       } else if(valueObject.raw_data === 1884545.5){
           $('.indicator' + x).append('<i class="fad fa-chart-network blue"></i>');
       } else if(valueObject.raw_data === 1968593.44){
           $('.indicator' + x).append('<i class="fal fa-wifi red"></i>');
       } else if(valueObject.raw_data === 1949148.41){
           $('.indicator' + x).append('<i class="far fa-project-diagram green"></i>');
       } else if(valueObject.raw_data === 1902458){
           $('.indicator' + x).append('<i class="fab fa-hive red"></i>');
       } else if(valueObject.raw_data === 1896141.36){
           $('.indicator' + x).append('<i class="far fa-ethernet blueviolet"></i>');
       }
       x++;
    });
}