Customizing an Indicator Widget

Summary: The document created by Ophir_Buchman is an extensive guide on customizing an indicator widget through code. It includes detailed sections on customizing various widget types, such as numerical and gauge indicators, with sub-types including 'Simple', 'Bar', 'Ticker', and 'Gauge'. The guide outlines different parts of the widget that can be modified, including primary and secondary titles and values, text properties, separators, and gauge properties. Sample code snippets demonstrate how to read and adjust these elements by implementing JavaScript and JQuery, providing the user with a comprehensive understanding of widget manipulation.

Introduction

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

Introduction
Table of Contents
How to Use This Page?
Widget Customizations
Manipulating the Widget

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

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

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

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


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

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 “Gauge 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
});

Ophir_Buchman

Posted 4 years ago·Last reply 2 months ago

1 comment

Rose Holmes-Minton

·2 months ago

Is there a wordwrap option?

Customizing an Indicator Widget

Introduction

Table of Contents

Table of Contents

How to Use This Page?

Widget Customizations

The “Simple” Numerical Widget

The “Ticker” Numerical Widget

The Gauge Widget

The “Ticker” Gauge Widget

Manipulating the Widget

The “Simple” Numerical Widget

Reading the Widget Type & Subtypes

Reading and Modifying the “Primary Title” Object

Reading and Modifying the “Primary Value” Object

Reading and Modifying the “Secondary Title” Object

Reading and Modifying the “Secondary Value” Object

Modifying the Separator Object

The “Bar” Numerical Widget

Reading the Widget Type & Subtypes

Reading and Modifying the “Primary Title” Object

Reading and Modifying the “Primary Value” Object

Reading and Modifying the “Secondary Title” Object

Reading and Modifying the “Secondary Value” Object

Modifying the Widget Brackets

The “Ticker” Numerical Widget

Reading the Widget Type & Subtypes

Reading and Modifying the Text-Generic Properties

Reading and Modifying the “Primary Title” Object

Reading and Modifying the “Primary Value” Object

Reading and Modifying the “Secondary Title” Object

Reading and Modifying the “Secondary Value” Object

Modifying the Divider

The Gauge Widget

Reading the Widget Type, Subtype, and Skin

Reading and Modifying the Text-Generic Properties

Reading and Modifying the “Primary Title” Object

Reading and Modifying the “Primary Value” Object

Reading and Modifying the “Secondary Title” Object

Reading and Modifying the “Secondary Value” Object

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

Modifying the Widget Brackets

Modifying the Gauge, Needle, and Ticks

The “Ticker” Gague Widget

Reading the Widget Type & Subtypes

Reading and Modifying the Text-Generic Properties

Reading and Modifying the “Primary Title” Object

Reading and Modifying the “Primary Value” Object

Reading and Modifying the “Secondary Title” Object

Reading and Modifying the “Secondary Value” Object

Modifying the Dividers

Modifying the Gauge Bar