Examples using vanila js

6 posts, 0 answers
  1. andre
    andre avatar
    10 posts
    Member since:
    Oct 2012

    Posted 04 Sep Link to this post

    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
  2. nikolay.tsonev
    Admin
    nikolay.tsonev avatar
    287 posts

    Posted 05 Sep Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
  3. andre
    andre avatar
    10 posts
    Member since:
    Oct 2012

    Posted 05 Sep in reply to nikolay.tsonev Link to this post

    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
  4. andre
    andre avatar
    10 posts
    Member since:
    Oct 2012

    Posted 05 Sep in reply to andre Link to this post

  5. andre
    andre avatar
    10 posts
    Member since:
    Oct 2012

    Posted 05 Sep in reply to andre Link to this post

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

    Best regards

  6. Nikolay Iliev
    Admin
    Nikolay Iliev avatar
    294 posts

    Posted 07 Sep Link to this post

    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
    Did you know that you can open private support tickets which are reviewed and answered within 24h by the same team who built the components? This is available in our UI for NativeScript Pro + Support offering.
Back to Top