cancel
Showing results for 
Search instead for 
Did you mean: 

color-coded indicator icon

duc_resolvevn
7 - Data Storage
7 - Data Storage

Dear @DRay,  

In Indicator widget document, I read that: "The Indicator widget provides various options for displaying one or two numeric values as a number, gauge or ticker. It also provides the option to add additional titles and a color-coded indicator icon representing the value, such as a green up arrow or a red down arrow."

Can you please help me how to add "a color-coded indicator icon representing the value, such as a green up arrow or a red down arrow", I need to create a widget as in attachment.

Thanks

1 ACCEPTED SOLUTION

AssafHanina
Sisense Team Member
Sisense Team Member

hey @duc_resolvevn ,

The Indicator Widget has a dedicated API, as provided in the following official link and examples shared in the following community post.

please find a sample Indicator widget script of customizing the secondary indicator and add an arrow symbol. 

widget.on('processresult', function(w, e) {

 var options = {

 secondaryValue: {
 fontFamily: 'Helvetica, sans-serif',
 fontWeight: 'bold',
 color: 'grey',
 fontSizes: {
 big: 20,
 medium: 15
 }
 }
 };

 
 if(e.result.secondary.data >= 0) {
 
 e.result.secondary.text = '▲' + e.result.secondary.text;
 options.secondaryValue.color = '#00FF00';
 
 
 }
 else {
 e.result.secondary.text = '▼' + e.result.secondary.text;
 options.secondaryValue.color = '#FF0000';
 }
 
 w.indicatorInstance.setOptions('numericSimple', options);

});

AssafHanina_0-1739895258790.png

Alternative solution can be using Blox which provide ability to add more Indicators and customize it. 
in the Blox Template, please refer to the Stock Market which provide an example with conditional formatting and image.

AssafHanina_1-1739895562506.png

FYI @DRay 

best regards

Assaf

View solution in original post

2 REPLIES 2

AssafHanina
Sisense Team Member
Sisense Team Member

hey @duc_resolvevn ,

The Indicator Widget has a dedicated API, as provided in the following official link and examples shared in the following community post.

please find a sample Indicator widget script of customizing the secondary indicator and add an arrow symbol. 

widget.on('processresult', function(w, e) {

 var options = {

 secondaryValue: {
 fontFamily: 'Helvetica, sans-serif',
 fontWeight: 'bold',
 color: 'grey',
 fontSizes: {
 big: 20,
 medium: 15
 }
 }
 };

 
 if(e.result.secondary.data >= 0) {
 
 e.result.secondary.text = '▲' + e.result.secondary.text;
 options.secondaryValue.color = '#00FF00';
 
 
 }
 else {
 e.result.secondary.text = '▼' + e.result.secondary.text;
 options.secondaryValue.color = '#FF0000';
 }
 
 w.indicatorInstance.setOptions('numericSimple', options);

});

AssafHanina_0-1739895258790.png

Alternative solution can be using Blox which provide ability to add more Indicators and customize it. 
in the Blox Template, please refer to the Stock Market which provide an example with conditional formatting and image.

AssafHanina_1-1739895562506.png

FYI @DRay 

best regards

Assaf

duc_resolvevn
7 - Data Storage
7 - Data Storage

Tks @AssafHanina , with your reply I understand that we don't have "no code" options for my question. When I read document I though widget prodvide "no code" option, we will try with edit script or blox. 

Type a product name