Examples using vanila js

[andre]

Hi,
How can I find some examples to use gauges with pure JS? I need to change the values of gauges dynamically, for eg for this two kinds of gauges (in attach).
Also there is any how to to help create any kind of gauges template?
Best regards

[Nikolay Tsonev]

Hello,

First of all, thank you for your interest in UI for NativeScript.

In your case, you could use the nativescript-ui-samples project and run tsc command, which will transpile all typescript file to javascript. For your convenience, I am attaching project with the with the transpiled typescript files for this component.

An example how to change the value of the gauges component could be found here.
Regarding your last question. the available XML templates, which could be used in a project could be found here in the scales and indicators sections.

Hope this helps.

Regards,
nikolay.tsonev
Progress Telerik

[andre]

Thanks for your help, you help me a lot.
But now I'm having some difficult to create gauges like on this example:
https://london.my-netdata.io/#menu_system_submenu_ram;theme=slate
Please take a look on top gauges (CPU %, DISK IO)..
It possible create gauges like this?
If yes, can you send me some XML template?
Best regards

[andre]

Correct link: https://london.my-netdata.io

[andre]

Also, can you put an example how can I change the text of gauges dynamically?

Best regards

[Nick Iliev]

Hello Andre,

Regarding "how can I change the text of gauges dynamically?"

Take a reference to your gauge control (e..g with unique ID and getViewById method) and then modify the title property to change the text of the title of your Gauge control.
e.g., based on this example here

<GridLayout rows="50, *, auto">
    <Button row="0" text="change gauge title" tap="changeTitle" />
    <gauge:RadRadialGauge id="gaugeView" title="km/h" row="1" margin="10">

        <!-- More code follows here -->

The unique id, in this case, is gaugeView.

Then in our code-behind file get the reference by id and create the logic to change the title (based on this code example)

let gauge: gaugesModule.RadRadialGauge;

export function onNavigatedTo(args) {

    gauge = <gaugesModule.RadRadialGauge>frameModule.topmost().getViewById("gaugeView");

}

export function changeTitle() {
    gauge.title = "miles / hour";
}

With the code above tapping the button will dynamically change the Gauge titlke. This approach can be used to change any exposed property of your Gauge control.

Regarding how to achive the CPU scale gauge

Assuming that we are working with this example, I will demonstrate how to achive the shape of the CPU scale in the link provided.. First we need to modify the startAngle property so the scale will start from the desired angle (value approx. 205) and than we need to set sweepAngle so we could set the area taht the scale will take place (in this case value of approx 130). Further you can customize the radius and of course the starting and the end numberal points.

Modify the example so that this line will look as follows

<gauge:RadialScale startAngle="205" sweepAngle="130" minimum="34" maximum="40" radius="0.6">

Do the same for the second scale on this line.

<gauge:RadialScale startAngle="205" sweepAngle="130" minimum="93.2" maximum="104" radius="0.7">

And the result is as follows (of course further styling will be required to adjust the needle and the CSS so they would look like the CPU scale)

Android

and iOS



There are many possibilities to customizing your gauge controls - use the documentation section here along with this demo applicaiton to feel and get the full potential of the gauges control.

Regards,
Nikolay Iliev
Progress Telerik