This widget shows the latest realtime measurement on a radial gauge.
⚠️ This project is no longer under development. Please use cumulocity-advanced-radial-gauge-widget-plugin for Application Builder >=2.x.x and Cumulocity >=1016.x.x⚠️
Advanced Radial Gauge Widget v2.0.1 requires minimum Application Builder v1.3.0. For older versions of Application Builder please use Advanced Radial Gauge Widget v1.0.2.
- Download the latest
advanced-radial-gauge-{version}.zip
file from the Releases section. - Make sure you have Runtime Widget Loader installed on your Cockpit or App Builder app.
- Open a dashboard.
- Click
more...
. - Select
Install Widget
and follow the instructions.
- Make sure you have successfully installed the widget.
- Click on
Add widget
. - Choose
Advanced Radial Gauge
widget. Title
is the title of widget. Provide a relevant name. You may choose to hide this. Go toAppearance
tab and chooseHidden
underWidget header style
.- Select the
device
. Measurement name
is the measurement supported by the selected device. Latest value of this measurement will be shown.Measurement font size
is to define the font size of the measurment value.No. of digits after decimal
is to define the number of digits to be shown after decimal point in measurment value.Indicator type
is how you want to indicate the current value on the chart. It can bePointer
orProgress Bar
.Axis width
is the width of axis.Axis label distance
is the distance of labels from the axis.Pointer offset (in %)
is the distance of pointer from the center of the chart. This is only applicable whenIndicator type
isPointer
.Progress bar color
is the color of progress bar. This is only application whenIndicator type
isProgress bar
.Text
is Label Text. It's a free text field that can be used to name the measurement or radial guage.Font size
is Label font size. It is to set the Label font size.Hyperlink
is to provide a url where you would like to navigate on click of the label. It is optional.Starting value
is the minimum measurement value expected.Limit value
is the maximum measurement value expected in case of single range. It will be limit value of a range in case of multiple ranges.Color
is range color. It is to set color of the defined range on axis.Add range
is to define additional ranges. Make sure the limit value of a next range is higher than its previous one.Remove range
is to delete a particular range.- Click
Save
to add the widget on the dashboard. - In case you see unexpected results on the widget, refer to browser console to see if there are error logs.
- Clone the repository on local machine using
git clone https://github.com/SoftwareAG/cumulocity-advanced-radial-gauge-widget.git
. - Run
npm install
to download the module dependencies. - Install c8ycli
npm install -g @c8y/cli
if not already. - Run
c8ycli server -u https://your_tenant_url
to start the server. - Go to
http://localhost:9000/apps/cockpit/
in the browser to view and test your changes. - (Optional) push the changes back to this repository.
- Finish the development and testing on your local machine.
- Run
gulp
to start the build process. Runnpm install -g gulp
to install gulp if not already. - Use
advanced-radial-gauge-{version}.zip
file in thedist
folder as a distribution.
These tools are provided as-is and without warranty or support. They do not constitute part of the Software AG product suite. Users are free to use, fork and modify them, subject to the license agreement. While Software AG welcomes contributions, we cannot guarantee to include every contribution in the master project.
For more information you can Ask a Question in the TECHcommunity Forums.
You can find additional information in the Software AG TECHcommunity.