Use Case

If the default gauge widget doesn't sufficiently cover the desired use case, a more advanced version is necessary. Additional customization has been setup for the process screen approach.

Prerequisites

Process screens are advanced options. It will require some level of HTML, Javascript & CSS understanding.

  • Administrative access to the portal
  • Back-end access to the portal server, or coordination with delivery engineer to help place CSS & Script files.

Description

Note: Originally designed for a dark background, edits may be needed to adjust to white background

Features

  • Conditional formatting.
  • Multiple tags (3 max).
  • Exposed a large set of high charts variables for customization.
  • Real time & aggregate historical data calls


Samples shown below (dashboard export is attached, tag names will need to be set).


Background

Process screens are a bazefield widget option available in dashboards. It provides a way for customers to build fully customization visualizations. Process Screens have description in the Dashboards user manual that can be found on the portal help section. Process screen manager can be found in the portal for UI upload & download access point.


Highcharts gauge examples can be found here.

https://www.highcharts.com/demo/gauge-solid 


Steps (To Use)


Step 1: Ensure process screen, scripts & css is loaded up into Process View Screen Production folder.

Contact support or delivery engineer to ensure this is added appropriately.


Step 2: Add Process Screen widget to dashboard

Open the dashboard you want to add the widget to, click 'Add widget', then select Process Screen.

Reference the process screen name as 'Gauge' as shown below. Choose a height that makes sense for the widget location and desired size of the visualization.


Step 3: Setup Query Parameters

Note: Reference Variable List below for options

It is best practices to copy the query parameter string to a text editor of your choice. Shown here is notepad++.


Add new line characters (\n) to all & symbols to view the parameters better.


These parameters is an example configuration. The minimum parameters needed are at least 1 tag, i.e. tagName=${Site}-ActivePower.RT. 

Format goes as follows:

  • &: Additional parameter (Only needed after the first parameter
  • variable= : variable in the query variable column of the Variable List table.
  • &tagName=SITE-WTG01-WindSpeed

This is adding additional variables to the javascript url parameter list, this is a general html option. To read more about it, check out this wikipedia and look up javascript usage as well https://en.wikipedia.org/wiki/Query_string.


After you have included all the desired variable definitions in the parameters string, copy and past it back into the Edit Widget 'Query parameters' section and close to apply.


Step 4: Test Setup and Adjust Parameters for desired effect.

An example simple option:


Here we see that the default location of the gauge ([50].[50]) in the pane center variable, https://api.highcharts.com/highcharts/pane.center needs adjusting. The top of the pane is trimmed off, so we should shift the centerY parameter. 

This looks better, however it isn't fitting the height of the process screen, which we set for 600.



Step 5: Troubleshooting

If the applied settings don't produce a visualization, there is most likely an error. Errors are visible in the Developer Tools or Source Inspector section of your browser. Using google chrome as the example (F12)


Showing below, we added a '%' symbol which will cause issues with URL query strings, as % will be used for symbol references.

Using the developer tools, you can take a dive into the source code and the failure location to help troubleshoot the location of the error.

Variable List

Note: Do not pass % characters in query string, for options that are in percent, the code will automatically format it with the appropriate percent

Query VariableHighcharts RelationDefault ValueDescription
tagNamelist of tag names, comma separated (not a highcharts variable)blankComma separated list of tag names
tagAliaslist of custom alias'  (not a highcharts variable)blankComma separed list of names you want to display instead of tag name for data label.
showTagAliashide/show (not a highcharts variable)falseFlag the alias on or off, if off only tag value is displayed
TagAliasHeighty https://api.highcharts.com/highcharts/plotOptions.solidgauge.dataLabels.y -35Controls the height of data label that displays tagAlias & tag value
decimalsdataLabel format (not a highcharts variable)
Inserted into Label format for value visualization
unitdataLabel format (not a highcharts variable)blankInserted in Label format
startanglestartAngle https://api.highcharts.com/highcharts/pane.startAngle -900 - 360 degrees with 0 on top, 180 on bottom, -90 left, 90 right
endangleendAngle https://api.highcharts.com/highcharts/pane.endAngle 900 - 360 degrees with 0 on top, 180 on bottom, -90 left, 90 right
gaugeSizesize https://api.highcharts.com/highcharts/pane.size 120Percent of the chart height.
gaugeshapeshape https://api.highcharts.com/highcharts/pane.background.shape arcVisualization option, arc should cover all gauge designs.
gaugeHeightheight https://api.highcharts.com/highcharts/chart.height 150pxThis should be set to the size of the height chosen for the process screen.
borderwidthborderWidth https://api.highcharts.com/highcharts/pane.background.borderColor 1Border of the pane.
tickMarkValuetickPositions (as array)blankAdd values, such as rated power in numeric comma separated list. They will be shown with a small tick mark on the gauge.
maxValuemax https://api.highcharts.com/highcharts/yAxis.max100Max for yAxis scale for data values
minValuemin https://api.highcharts.com/highcharts/yAxis.min 0Min for yAxis scale for data values
paneBgColorbackground https://api.highcharts.com/highcharts/pane.background #333Background color of gauge pane
bgFillbackgroundColor https://api.highcharts.com/highcharts/chart.backgroundColor #404040Background fill of the chart area
centerXcenter https://api.highcharts.com/highcharts/pane.center 50center: [centerX, centerY],
centerYcenter https://api.highcharts.com/highcharts/pane.center 50center: [centerX, centerY],
outRadiusouterRadius https://api.highcharts.com/highcharts/pane.background.outerRadius 100Outside rim of the arc, percent away from center
inRadiusinnerRadius https://api.highcharts.com/highcharts/pane.background.innerRadius  70Inside rim of the arc, percent away from center
dangerFactorstops array https://api.highcharts.com/highcharts/yAxis.stops 

 [0.1, '#55BF3B'], // green

[0.5, '#DDDF0D'], // yellow

  [0.9, '#DF5353'] // red

[dangerFactor, ' #f5113b']
warningFactorstops array https://api.highcharts.com/highcharts/yAxis.stops blank[warningFactor, '#fca800']
hazardFactorstops array https://api.highcharts.com/highcharts/yAxis.stopsblank[hazardFactor, '#f5f511']
infoFactorstops array https://api.highcharts.com/highcharts/yAxis.stops blank[infoFactor, '#009ebd']
successFactorstops array https://api.highcharts.com/highcharts/yAxis.stops blank[successFactor, '#50f71e']
to

(not a highcharts variable)


*Utilizes bazefield api time selection syntax * for now
from

(not a highcharts variable)


*-15mUtilizes bazefield api time selection syntax *-1d or *-5m
agg

(not a highcharts variable)

1 = interp

        2 = total

        3 = avg

        4 = timeavg

        5 = counter

        6 = stdev

        7 = min actual time

        8 = minuim

        9 = max actual time

        10 = max

        11 = start

        12 = end

        13 = delta

        17 = variance

        18 = range

        19 = duration good


1Selects the bazefield API aggregation type
intervalRefresh(not a highcharts variable)2s of update rate for query new data
tag1ColorUtilizes highcharts "stops" for yAxis 1
#00ACC8
Sets the color for the first tag, html hex code
tag2ColorUtilizes highcharts "stops" for yAxis 2
#FCB426
Sets the color for the second tag, html hex code
tag3ColorUtilizes highcharts "stops" for yAxis 3
#329144
Sets the color for the third tag, html hex code