cancel
Showing results for 
Search instead for 
Did you mean: 
Ophir_Buchman
Sisense Team Member
Sisense Team Member

Introduction

The following document provides code snippets for customizing an indicator widget.

Table of Contents

How to Use This Page?

To implement the customizations you’ll have to get familiar with the following:

  • Basic JavaScript and JQuery
  • Widget Lifecycle
  • How to add a widget script

Widget Customizations

The indicator widget breaks down into a few widget types:

  • Numerical Indicator - Simple / Bar / Ticker
  • Gauge Indicator - Simple / Ticker

The following document breaks down the different attributes for every widget type.

Note that the indicator widget is different than other widgets - The widget is rendered to a picture (canvas) and presented in the widget. Once drawn, you can’t modify it. Instead, all modifications must be made while processing the widget’s query.

The “Simple” Numerical Widget

b5485102-44cf-41b3-badf-edf337b8d7b9.png

 
Element Value
Widget Type “indicator”
Widget Sub-Type “indicator/numeric”
Indicator Sub-Type “numericSimple”
Background Color “transparent“
Primary Title

Text = “Current Value”
Color = #5B6372
Size = [12,15,18,22]

Primary Value Value = 5,161,800
Text = “5.16M”
Size = [23,32,46,66]
Color = Conditional Formatting
Secondary Title Text = “Estimated Forecast”
Color = #9EA2AB
Size = [10,10,14,20]
Secondary Value Value = 5,407,600
Text = “5.4M”
Color = #9EA2AB
Size = [10,10,14,20]
Font Weight = 800
Value Seperator Color = Gray
Width = 1
 
The “Bar” Numerical Widget

6e733207-031c-489e-ba47-df36b86e0c29.png

 

Element Value
Widget Type "indicator"
Widget Sub-Type “indicator/numeric”
Indicator Sub-Type “numericBar”
Background Color “transparent“
Widget-Sourounding Bracket Color = #C6C6C6
Primary Title Text = “Current Value”
Color = #5B6372
Size = [12,15,18,22]
Primary Value Value = 5,161,800
Text = “5.16M”
Size = [15,22,31,45]
Color = #FFFFFF (White)
Secondary Title Text = “Estimated Forecast”
Color = #9EA2AB
Size = [10,10,14,20]
Secondary Value Value = 5,407,600
Text = “5.4M”
Color = #9EA2AB
Size = [10,10,14,20]
Font Weight = 800

The “Ticker” Numerical Widget

bab45ba4-551a-4f86-873a-81689e3e4ba4.png

 

Element Value
Widget Type “indicator”
Widget Sub-Type “indicator/numeric”
Indicator Sub-Type “ticker”
Background Color “transparent“
Primary Title Text = “Current Value”
Color = #5B6372
Size = 15
Primary Value Value = 5,161,800
Text = “5.16M”
Size = 15
Color = Conditional Formatting
Font Weight = 800
Divider Color = #272A34
Height = 13
Width = 1
Secondary Title Text = “Estimated Forecast”
Color = #9EA2AB
Size = 15
Secondary Value Value = 5,407,600
Text = “5.4M”
Color = #9EA2AB
Size = 15

 The Gauge Widget

d01d5297-07a6-492c-9b4c-ba3abcf91f1d.png 896e3b44-11bc-4e63-9a44-f6d86b05316d.png
Skin #1 Skin #2

 

Element Value
Widget Type “indicator”
Widget Sub-Type “indicator/gauge”
Indicator Sub-Type “gauge”
Skin “1” / “2”
Background Color “transparent“
Surrounding Bracket Color = #C6C6C6
Primary Title Text = “Current Value”
Color = #5B6372
Size = [12,15,18,22]
Primary Value Value = 5,161,800
Text = “5.16M”
Size = [15,22,31,45]
Color = Conditional Formatting
Gague Gauge Opacity = 50% (Skin #1)
Tick Range Start = 20°
Tick Range End = 160°
Tick Frequency = 10°
Over Degrees = 5°
Needle Color = #2B3342
Tick Color = #FFFFFF
Min Value Value = 0
Text = “0”
Color = #5B6372
Max Value Value = 6145000
Text = “6.15M”
Color = #5B6372
Secondary Title Text = “Estimated Forecast”
Color = #9EA2AB
Size = [10,10,14,20]
Secondary Value Value = 5,407,600
Text = “5.4M”
Color = #9EA2AB
Size = [10,10,14,20]
Font Weight = 800

The “Ticker” Gauge Widget

28327849-6c2c-4a03-bef4-f77e0bbbbfa0.png

 

Element Value
Widget Type “indicator”
Widget Sub-Type “indicator/gauge”
Indicator Sub-Type “ticker”
Background Color “transparent“
Generic Text Data Font Family = “Open Sans“
Font Size = 15
Text Padding = 6
Primary Title Text = “Current Value”
Color = #5B6372
Primary Value Value = 5,161,800
Text = “5.16M”
Color = Conditional Formatting
Font Weight = 800
Divider Color = #272A34
Height = 13
Width = 1
Secondary Title Text = “Estimated Forecast”
Color = #9EA2AB
Secondary Value Value = 5,407,600
Text = “5.4M”
Color = #9EA2AB
Gauge Bar Height = 11
Opacity = 50%
Width = 100
Handle Color = #2B3342

Manipulating the Widget

The “Simple” Numerical Widget

Reading the Widget Type & Subtypes

To read the widget type and sub-types, use the following code:

widget.on('processresult', function(widget, query) {
    // Read Widget Type
    console.log('Widget Type: ' + widget.type); // Returns "indicator"
    
    // Read Widget Sub-Type
	console.log('Widget Sub-type: ' + widget.subtype); // Returns "indicator/numeric"
});

widget.on('ready', function(widget) {
    // Read Indicator Widget Sub-Type
    console.log('Widget SubType: ' + widget.indicatorInstance.type); // Returns "numericSimple"
});

Reading and Modifying the “Primary Title” Object

To read and modify the “Primary Title” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["numericSimple"];
    
    // Read Primary Title Text
    console.log('Primary Title Caption: ' + query.result.title.text);
    
    // Override Primary Title Text
    query.result.title.text = "Current Value"
    
    // Override Primary Title Color
    opMap.title.color='green'
    
    // Override Primary Title Font Size (see font section)
    opMap.title.fontSizes["big"] = 20
    
    // Override Primary Title Font Style
    opMap.title.fontStyle = 'italic'
    opMap.title.fontWeight = 'bold'

});

 Reading and Modifying the “Primary Value” Object

The “Primary Value” is represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the “Primary Value” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["numericSimple"];
    
    // Read "Primary Value" Numerical & Text Values
    console.log('Primary Value Data: ' + query.result.value.data);
    console.log('Primary Value Text: ' + query.result.value.text);
    
    // Override "Primary Value" Text Value
    query.result.value.text = "5.16M"
    
    // Read the "Primary Value" Color
    colorSetting = widget.metadata.panels[0].items[0].format.color
    if (colorSetting.hasOwnProperty('color'))
    {
        // Value has a Fixed Color
		console.log('The "Primary Value" color: ' + colorSetting.color);
	}
	else
	{
		// Value has Conditional Formatting
		console.log('The "Primary Value" has conditional formatting (' + colorSetting.conditions.length + ' rules):');
		colorSetting.conditions.forEach(function(condition) {
			console.log(' - Color: ' + condition.color + ' if value ' + condition.operator + ' ' + condition.expressionValue);
		})
	}
    
    // Override the Primary Value's Color
    opMap.value.color='green'
    
    // Override the "Primary Value" Font Size (see font section)
    opMap.value.fontSizes["big"] = 20
    
    // Override the "Primary Value" Font Style
    opMap.value.fontStyle = 'italic'
    opMap.value.fontWeight = 'bold'
});

Reading and Modifying the “Secondary Title” Object

To read and modify the “Secondary Title” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["numericSimple"];
    
    // Read “Secondary Title” Text
    console.log('Primary Title Caption: ' + query.result.secondaryTitle.text);
    
    // Override “Secondary Title” Text
    query.result.secondaryTitle.text = "Forecast Value"
    
    // Override “Secondary Title” Color
    opMap.secondaryTitle.color='green'
    
    // Override “Secondary Title” Font Size (see font section)
    opMap.secondaryTitle.fontSizes["big"] = 20
    
    // Override “Secondary Title” Font Style
    opMap.secondaryTitle.fontStyle = 'italic'
    opMap.secondaryTitle.fontWeight = 'bold'
    
});

Reading and Modifying the “Secondary Value” Object

The “Secondary Value” is represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the “Secondary Value” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["numericSimple"];
    
    // Read "Secondary Value" Numerical & Text Values
    console.log('Secondary Value Data: ' + query.result.secondary.data);
    console.log('Secondary Value Text: ' + query.result.secondary.text);
    
    // Override "Secondary Value" Display Text Value
    query.result.secondary.text = "5.16M"
    
    // Override "Secondary Value" Color
    opMap.secondaryValue.color='green'
    
    // Override "Secondary Value" Font Size (see font section)
    opMap.secondaryValue.fontSizes["big"] = 20
    
    // Override "Secondary Value" Font Style
    opMap.secondaryValue.fontStyle = 'italic'
    opMap.secondaryValue.fontWeight = 'bold'
});

Modifying the Separator Object

To read and modify the “Separator” use the following code:

widget.on('processresult', function(widget, query) {

    opMap = widget.indicatorInstance._optionsMap["numericSimple"];
    
    // Read "Separator" color
    console.log('Value Separator Color = ' + opMap.borderColor);
    
    // Override "Separator" color
    opMap.borderColor = 'red'
});

The “Bar” Numerical Widget

Reading the Widget Type & Subtypes

To read the widget type and sub-types, use the following code:

widget.on('processresult', function(widget, query) {
    // Read Widget Type
    console.log('Widget Type: ' + widget.type); // Returns "indicator"
    
    // Read Widget Sub-Type
	console.log('Widget Sub-type: ' + widget.subtype); // Returns "indicator/numeric"
});

widget.on('ready', function(widget) {
    // Read Indicator Widget Sub-Type
    console.log('Widget SubType: ' + widget.indicatorInstance.type); // Returns "numericBar"
});

Reading and Modifying the “Primary Title” Object

To read and modify the “Primary Title” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["numericBar"];
    
    // Read Primary Title Text
    console.log('Primary Title Caption: ' + query.result.title.text);
    
    // Override Primary Title Text
    query.result.title.text = "Current Value"
    
    // Override Primary Title Color
    opMap.title.color='green'
    
    // Override Primary Title Font Size (see font section)
    opMap.title.fontSizes["big"] = 20
    
    // Override Primary Title Font Style
    opMap.title.fontStyle = 'italic'
    opMap.title.fontWeight = 'bold'
    
});

Reading and Modifying the “Primary Value” Object

The “Primary Value” is represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the “Primary Value” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["numericBar"];
    
    // Read "Primary Value" Numerical & Text Values
    console.log('Primary Value Data: ' + query.result.value.data);
    console.log('Primary Value Text: ' + query.result.value.text);
    
    // Override "Primary Value" Text Value
    query.result.value.text = "5.16M"
    
    // Read the "Primary Value" Background Color
    colorSetting = widget.metadata.panels[0].items[0].format.color
    if (colorSetting.hasOwnProperty('color'))
    {
        // Value has a Fixed Color
		console.log('The "Primary Value" background color: ' + colorSetting.color);
	}
	else
	{
		// Value has Conditional Formatting
		console.log('The "Primary Value" has conditional formatting (' + colorSetting.conditions.length + ' rules):');
		colorSetting.conditions.forEach(function(condition) {
			console.log(' - Background Color: ' + condition.color + ' if value ' + condition.operator + ' ' + condition.expressionValue);
		})
	}
	
	// Read the "Primary Value" Foreground Color
    console.log('The "Primary Value" foreground color: ' + opMap.value.color);
    
    // Override the Primary Value's foreground Color
    opMap.value.color='green'
    
    // Override the "Primary Value" Font Size (see font section)
    opMap.value.fontSizes["big"] = 20
    
    // Override the "Primary Value" Font Style
    opMap.value.fontStyle = 'italic'
    opMap.value.fontWeight = 'bold'
});

Reading and Modifying the “Secondary Title” Object

To read and modify the “Secondary Title” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["numericBar"];
    
    // Read “Secondary Title” Text
    console.log('Primary Title Caption: ' + query.result.secondaryTitle.text);
    
    // Override “Secondary Title” Text
    query.result.secondaryTitle.text = "Forecast Value"
    
    // Override “Secondary Title” Color
    opMap.secondaryTitle.color='green'
    
    // Override “Secondary Title” Font Size (see font section)
    opMap.secondaryTitle.fontSizes["big"] = 20
    
    // Override “Secondary Title” Font Style
    opMap.secondaryTitle.fontStyle = 'italic'
    opMap.secondaryTitle.fontWeight = 'bold'
    
});

Reading and Modifying the “Secondary Value” Object

The “Secondary Value” is represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the “Secondary Value” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["numericBar"];
    
    // Read "Secondary Value" Numerical & Text Values
    console.log('Secondary Value Data: ' + query.result.secondary.data);
    console.log('Secondary Value Text: ' + query.result.secondary.text);
    
    // Override "Secondary Value" Display Text Value
    query.result.secondary.text = "5.16M"
    
    // Override "Secondary Value" Color
    opMap.secondaryValue.color='green'
    
    // Override "Secondary Value" Font Size (see font section)
    opMap.secondaryValue.fontSizes["big"] = 20
    
    // Override "Secondary Value" Font Style
    opMap.secondaryValue.fontStyle = 'italic'
    opMap.secondaryValue.fontWeight = 'bold'
});

Modifying the Widget Brackets

To read and modify the “Brackets” use the following code:

widget.on('processresult', function(widget, query) {

    opMap = widget.indicatorInstance._optionsMap["numericBar"];
    
    // Read "Brackets" color
    console.log('Value Separator Color = ' + opMap.bracketColor);
    
    // Override "Brackets" color
    opMap.bracketColor = 'red'
});

The “Ticker” Numerical Widget

Reading the Widget Type & Subtypes

To read the widget type and sub-types, use the following code:

widget.on('processresult', function(widget, query) {
    // Read Widget Type
    console.log('Widget Type: ' + widget.type); // Returns "indicator"
    
    // Read Widget Sub-Type
	console.log('Widget Sub-type: ' + widget.subtype); // Returns "indicator/numeric"
});

widget.on('ready', function(widget) {
    // Read Indicator Widget Sub-Type
    console.log('Widget SubType: ' + widget.indicatorInstance.type); // Returns "ticker"
});

Reading and Modifying the Text-Generic Properties

To read and modify the general text styling use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read Generic Text Properties
    console.log('Generic Text Font Family: ' + opMap.fontFamily);
    console.log('Generic Text Font Size: ' + opMap.fontSize);
    console.log('Generic Text Padding: ' + opMap.textPadding);
    
    // Override Generic Text Font Family
    opMap.fontFamily = "David"
    
    // Override Text Font Size
    opMap.fontSize = 30
    
    // Override Text Padding (space between title and value)
    opMap.textPadding = 100
});

Reading and Modifying the “Primary Title” Object

To read and modify the “Primary Title” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read Primary Title Text
    console.log('Primary Title Caption: ' + query.result.title.text);
    
    // Override Primary Title Text
    query.result.title.text = "Current Value"
    
    // Override Primary Title Color
    opMap.title.color='green'
    
    // Override Primary Title Font Size (overrides the "Generic" setting)
    opMap.title.fontSize = 40
    
    // Override Primary Title Font Style
    opMap.title.fontStyle = 'italic'
    opMap.title.fontWeight = 'bold'
    
});

Reading and Modifying the “Primary Value” Object

The “Primary Value” is represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the “Primary Value” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read "Primary Value" Numerical & Text Values
    console.log('Primary Value Data: ' + query.result.value.data);
    console.log('Primary Value Text: ' + query.result.value.text);
    
    // Override "Primary Value" Text Value
    query.result.value.text = "5.16M"
    
    // Read the "Primary Value" Color
    colorSetting = widget.metadata.panels[0].items[0].format.color
    if (colorSetting.hasOwnProperty('color'))
    {
        // Value has a Fixed Color
		console.log('The "Primary Value" background color: ' + colorSetting.color);
	}
	else
	{
		// Value has Conditional Formatting
		console.log('The "Primary Value" has conditional formatting (' + colorSetting.conditions.length + ' rules):');
		colorSetting.conditions.forEach(function(condition) {
			console.log(' - Background Color: ' + condition.color + ' if value ' + condition.operator + ' ' + condition.expressionValue);
		})
	}
	
	// Override the Primary Value's Color
    opMap.value.color='green'
    
    // Override the "Primary Value" Font Size (overrides the "Generic" setting)
    opMap.value.fontSize = 20
    
    // Override the "Primary Value" Font Style
    opMap.value.fontStyle = 'italic'
    opMap.value.fontWeight = 'bold'
});

Reading and Modifying the “Secondary Title” Object

To read and modify the “Secondary Title” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read “Secondary Title” Text
    console.log('Primary Title Caption: ' + query.result.secondaryTitle.text);
    
    // Override “Secondary Title” Text
    query.result.secondaryTitle.text = "Forecast Value"
    
    // Override “Secondary Title” Color
    opMap.secondaryTitle.color='green'
    
    // Override “Secondary Title” Font Size (overrides the "Generic" setting)
    opMap.secondaryTitle.fontSize = 20
    
    // Override “Secondary Title” Font Style
    opMap.secondaryTitle.fontStyle = 'italic'
    opMap.secondaryTitle.fontWeight = 'bold'
    
});

Reading and Modifying the “Secondary Value” Object

The “Secondary Value” is represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the “Secondary Value” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read "Secondary Value" Numerical & Text Values
    console.log('Secondary Value Data: ' + query.result.secondary.data);
    console.log('Secondary Value Text: ' + query.result.secondary.text);
    
    // Override "Secondary Value" Display Text Value
    query.result.secondary.text = "5.16M"
    
    // Override "Secondary Value" Color
    opMap.secondaryValue.color='green'
    
    // Override "Secondary Value" Font Size (overrides the "Generic" setting)
    opMap.secondaryValue.fontSize = 20
    
    // Override "Secondary Value" Font Style
    opMap.secondaryValue.fontStyle = 'italic'
    opMap.secondaryValue.fontWeight = 'bold'
});

Modifying the Divider

To read and modify the “Dividers” use the following code:

widget.on('processresult', function(widget, query) {

    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read "Divider" Color
    console.log('Divider Color is = ' + opMap.dividerColor);
    
    // Read "Divider" Width
    console.log('Divider Color is = ' + opMap.dividerWidth);
    
    // Read "Divider" Height
    console.log('Divider Color is = ' + opMap.dividerHeight);
    
    // Override "Divider" Properties
    opMap.dividerColor = 'red'
    opMap.dividerWidth = 30
    opMap.dividerHeight = 10
    
    // Match the divider height to the widget's height
    opMap.dividerHeight = opMap.height
});

The Gauge Widget

Reading the Widget Type, Subtype, and Skin

To read the widget type, sub-types, and skin use the following code:

widget.on('processresult', function(widget, query) {
    // Read Widget Type
    console.log('Widget Type: ' + widget.type); // Returns "indicator"
    
    // Read Widget Sub-Type
	console.log('Widget Sub-type: ' + widget.subtype); // Returns "indicator/gauge"
});

widget.on('ready', function(widget) {
    // Read Indicator Widget Sub-Type and Skin
    console.log('Widget SubType: ' + widget.indicatorInstance.type); // Returns "gauge"
    console.log('Widget Skin: ' + widget.indicatorInstance._dataMap.gauge.skin); // Returns "gauge"
});

Reading and Modifying the Text-Generic Properties

To read and modify the general text styling use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["gauge"];
    
    // Read Generic Text Properties
    console.log('Generic Text Font Family: ' + opMap.fontFamily);

    // Override Generic Text Font Family
    opMap.fontFamily = "David"
});

Reading and Modifying the “Primary Title” Object

To read and modify the “Primary Title” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["gauge"];
    
    // Read Primary Title Text
    console.log('Primary Title Caption: ' + query.result.title.text);
    
    // Override Primary Title Text
    query.result.title.text = "Current Value"
    
    // Override Primary Title Color
    opMap.title.color='green'
    
    // Override Primary Title Font Size
    opMap.title.fontSizes["medium"] = 40
    
    // Override Primary Title Font Style
    opMap.title.fontStyle = 'italic'
    opMap.title.fontWeight = 'bold'
    
});

Reading and Modifying the “Primary Value” Object

The “Primary Value” is represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the “Primary Value” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["gauge"];
    
    // Read "Primary Value" Numerical & Text Values
    console.log('Primary Value Data: ' + query.result.value.data);
    console.log('Primary Value Text: ' + query.result.value.text);
    
    // Override "Primary Value" Text Value
    query.result.value.text = "5.16M"
    
    // Read the "Primary Value" Color
    colorSetting = widget.metadata.panels[0].items[0].format.color
    if (colorSetting.hasOwnProperty('color'))
    {
        // Value has a Fixed Color
		console.log('The "Primary Value" background color: ' + colorSetting.color);
	}
	else
	{
		// Value has Conditional Formatting
		console.log('The "Primary Value" has conditional formatting (' + colorSetting.conditions.length + ' rules):');
		colorSetting.conditions.forEach(function(condition) {
			console.log(' - Background Color: ' + condition.color + ' if value ' + condition.operator + ' ' + condition.expressionValue);
		})
	}
	
	// Override the Primary Value's Color
    opMap.value.color='green'
    
    // Override the "Primary Value" Font Size
    opMap.value.fontSizes["medium"] = 40
    
    // Override the "Primary Value" Font Style
    opMap.value.fontStyle = 'italic'
    opMap.value.fontWeight = 'bold'
});

Reading and Modifying the “Secondary Title” Object

To read and modify the “Secondary Title” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["gauge"];
    
    // Read “Secondary Title” Text
    console.log('Primary Title Caption: ' + query.result.secondaryTitle.text);
    
    // Override “Secondary Title” Text
    query.result.secondaryTitle.text = "Forecast Value"
    
    // Override “Secondary Title” Color
    opMap.secondaryTitle.color='green'
    
    // Override “Secondary Title” Font Size (overrides the "Generic" setting)
    opMap.secondaryTitle.fontSizes["medium"] = 40
    
    // Override “Secondary Title” Font Style
    opMap.secondaryTitle.fontStyle = 'italic'
    opMap.secondaryTitle.fontWeight = 'bold'
    
});

Reading and Modifying the “Secondary Value” Object

The “Secondary Value” is represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the “Secondary Value” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["gauge"];
    
    // Read "Secondary Value" Numerical & Text Values
    console.log('Secondary Value Data: ' + query.result.secondary.data);
    console.log('Secondary Value Text: ' + query.result.secondary.text);
    
    // Override "Secondary Value" Display Text Value
    query.result.secondary.text = "5.16M"
    
    // Override "Secondary Value" Color
    opMap.secondaryValue.color='blue'
    
    // Override "Secondary Value" Font Size (overrides the "Generic" setting)
    opMap.secondaryValue.fontSizes["medium"] = 40
    
    // Override "Secondary Value" Font Style
    opMap.secondaryValue.fontStyle = 'italic'
    opMap.secondaryValue.fontWeight = 'bold'
});

Reading and Modifying the “Min Value” and “Max Value” Objects

The “Min Value” and “Max Value” are represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the values use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["gauge"];
    
    // Read "Min Value" Numerical & Text Values
    console.log('Min Value Data: ' + query.result.min.data);
    console.log('Min Value Text: ' + query.result.min.text);
    
    // Override "Min Value" Display Text Value
    query.result.min.text = "MIN"
    
    console.log('Max Value Data: ' + query.result.max.data);
    console.log('Max Value Text: ' + query.result.max.text);
    
    // Override "Max Value" Display Text Value
    query.result.max.text = "MAX"
    
    // Read Min/Max label properties
    console.log('Min/Max Label Color: ' + opMap.label.color);
    
    // Override Min and Max Font Color
    opMap.label.color = 'green'
    
    // Override Min and Max Font Size
    opMap.label.fontSizes["medium"] = 40
    
    // Override Min and Max Font Style
    opMap.label.fontStyle = 'italic'
    opMap.label.fontWeight = 'bold'
});

Modifying the Widget Brackets

To read and modify the “Brackets” use the following code:

widget.on('processresult', function(widget, query) {

    opMap = widget.indicatorInstance._optionsMap["gauge"];
    
    // Read "Brackets" color
    console.log('Value Separator Color = ' + opMap.bracketColor);
    
    // Override "Brackets" color
    opMap.bracketColor = 'red'
});

Modifying the Gauge, Needle, and Ticks

To read and modify the “Gauge”, “Needle”, and “Ticks” use the following code:

widget.on('processresult', function(widget, query) {

    opMap = widget.indicatorInstance._optionsMap["gauge"];
    
    // Read "Gauge" information - Relevant for "Skin 1"
    console.log('Gauge opacity is = ' + opMap.gaugeOpacity * 100 + '%'); // Bright area of the gauge
    
    // Read "Needle" information
    console.log('Needle range (degrees) = ' + opMap.startAngle + '-' + opMap.endAngle);
    console.log('Needle "out of" min/max range (degrees) = ' + opMap.overDegrees);
    console.log('Needle color = ' + opMap.needleColor);
    
    // Read "Ticks" information
    console.log('Ticks show every (degrees) = ' + opMap.tickDegreesIncrement);
    console.log('Ticks color = ' + opMap.tickColor);
    
    // Override "Gauge" properties
    opMap.gaugeOpacity = 0.2
    
    // Override "Needle" properties
    opMap.startAngle = 5
    opMap.endAngle = 175
    opMap.needleColor = 'red'
    
    // Override "Ticks" properties
    opMap.tickDegreesIncrement = 5
    opMap.tickColor = 'blue'
});

The “Ticker” Gague Widget

Reading the Widget Type & Subtypes

To read the widget type and sub-types, use the following code:

widget.on('processresult', function(widget, query) {
    // Read Widget Type
    console.log('Widget Type: ' + widget.type); // Returns "indicator"
    
    // Read Widget Sub-Type
	console.log('Widget Sub-type: ' + widget.subtype); // Returns "indicator/gauge"
});

widget.on('ready', function(widget) {
    // Read Indicator Widget Sub-Type
    console.log('Widget SubType: ' + widget.indicatorInstance.type); // Returns "ticker"
});

Reading and Modifying the Text-Generic Properties

To read and modify the general text styling use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read Generic Text Properties
    console.log('Generic Text Font Family: ' + opMap.fontFamily);
    console.log('Generic Text Font Size: ' + opMap.fontSize);
    console.log('Generic Text Padding: ' + opMap.textPadding);
    
    // Override Generic Text Font Family
    opMap.fontFamily = "David"
    
    // Override Text Font Size
    opMap.fontSize = 30
    
    // Override Text Padding (space between title and value)
    opMap.textPadding = 100
});

Reading and Modifying the “Primary Title” Object

To read and modify the “Primary Title” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read Primary Title Text
    console.log('Primary Title Caption: ' + query.result.title.text);
    
    // Override Primary Title Text
    query.result.title.text = "Current Value"
    
    // Override Primary Title Color
    opMap.title.color='green'
    
    // Override Primary Title Font Size (overrides the "Generic" setting)
    opMap.title.fontSize = 40
    
    // Override Primary Title Font Style
    opMap.title.fontStyle = 'italic'
    opMap.title.fontWeight = 'bold'
    
});

Reading and Modifying the “Primary Value” Object

The “Primary Value” is represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the “Primary Value” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read "Primary Value" Numerical & Text Values
    console.log('Primary Value Data: ' + query.result.value.data);
    console.log('Primary Value Text: ' + query.result.value.text);
    
    // Override "Primary Value" Text Value
    query.result.value.text = "5.16M"
    
    // Read the "Primary Value" Color
    colorSetting = widget.metadata.panels[0].items[0].format.color
    if (colorSetting.hasOwnProperty('color'))
    {
        // Value has a Fixed Color
		console.log('The "Primary Value" background color: ' + colorSetting.color);
	}
	else
	{
		// Value has Conditional Formatting
		console.log('The "Primary Value" has conditional formatting (' + colorSetting.conditions.length + ' rules):');
		colorSetting.conditions.forEach(function(condition) {
			console.log(' - Background Color: ' + condition.color + ' if value ' + condition.operator + ' ' + condition.expressionValue);
		})
	}
	
	// Override the Primary Value's Color
    opMap.value.color='green'
    
    // Override the "Primary Value" Font Size (overrides the "Generic" setting)
    opMap.value.fontSize = 20
    
    // Override the "Primary Value" Font Style
    opMap.value.fontStyle = 'italic'
    opMap.value.fontWeight = 'bold'
});

Reading and Modifying the “Secondary Title” Object

To read and modify the “Secondary Title” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read “Secondary Title” Text
    console.log('Primary Title Caption: ' + query.result.secondaryTitle.text);
    
    // Override “Secondary Title” Text
    query.result.secondaryTitle.text = "Forecast Value"
    
    // Override “Secondary Title” Color
    opMap.secondaryTitle.color='green'
    
    // Override “Secondary Title” Font Size (overrides the "Generic" setting)
    opMap.secondaryTitle.fontSize = 20
    
    // Override “Secondary Title” Font Style
    opMap.secondaryTitle.fontStyle = 'italic'
    opMap.secondaryTitle.fontWeight = 'bold'
    
});

Reading and Modifying the “Secondary Value” Object

The “Secondary Value” is represented in two formats:

  • The numerical format - Represents the query’s result
  • The textual form - Represents the string displayed in the widget

To read and modify the “Secondary Value” use the following code:

widget.on('processresult', function(widget, query) {
    
    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read "Secondary Value" Numerical & Text Values
    console.log('Secondary Value Data: ' + query.result.secondary.data);
    console.log('Secondary Value Text: ' + query.result.secondary.text);
    
    // Override "Secondary Value" Display Text Value
    query.result.secondary.text = "5.16M"
    
    // Override "Secondary Value" Color
    opMap.secondaryValue.color='green'
    
    // Override "Secondary Value" Font Size (overrides the "Generic" setting)
    opMap.secondaryValue.fontSize = 20
    
    // Override "Secondary Value" Font Style
    opMap.secondaryValue.fontStyle = 'italic'
    opMap.secondaryValue.fontWeight = 'bold'
});

Modifying the Dividers

To read and modify the “Dividers” use the following code:

widget.on('processresult', function(widget, query) {

    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read "Divider" Color
    console.log('Divider Color is = ' + opMap.dividerColor);
    
    // Read "Divider" Width
    console.log('Divider Color is = ' + opMap.dividerWidth);
    
    // Read "Divider" Height
    console.log('Divider Color is = ' + opMap.dividerHeight);
    
    // Override "Divider" Properties
    opMap.dividerColor = 'red'
    opMap.dividerWidth = 30
    opMap.dividerHeight = 10
    
    // Match the divider height to the widget's height
    opMap.dividerHeight = opMap.height
});

Modifying the Gauge Bar

To read and modify the “Gague Bar” use the following code:

widget.on('processresult', function(widget, query) {

    opMap = widget.indicatorInstance._optionsMap["ticker"];
    
    // Read "Gague Bar" Properties
    console.log('Bar Height is = ' + opMap.barHeight);
    console.log('Bar Width is = ' + opMap.barWidth);
    console.log('Bar opacity is = ' + opMap.barOpacity * 100 + '%'); // Bright area of the bar
    
    // Read "Gague Bar Handle" Properties (indicator in the bar)
    console.log('Bar Handle color is = ' + opMap.barHandleColor);
    console.log('Bar Handle height is = ' + opMap.tickerBarHeight);
    console.log('Bar Handle widthis = ' + opMap.tickerBarWidth);
    
    // Override "Gague Bar" Properties
    opMap.barHeight = 20
    opMap.barWidth = 150
    opMap.barOpacity = 0.2
    
    // Override "Gague Bar" Handle Properties
    opMap.barHandleColor = 'red'
    opMap.tickerBarHeight = opMap.barHeight
    opMap.tickerBarWidth = 5
});
Version history
Last update:
‎01-05-2022 07:28 AM
Updated by:
Contributors
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Need additional support?:

Community Support Request