Introduction
The following document provides code snippets for customizing an indicator widget.
Table of Contents
Table of Contents Introduction 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
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
});
