Gauges JS

Thread is closed for posting
3 posts, 0 answers
  1. Roel
    Roel avatar
    10 posts
    Member since:
    Jan 2018

    Posted 05 Jan Link to this post


    I was wondering if I also can use gauges with javascript instead of typescript. I need to change the values dynamically so I was wondering if there was an option to make gauges pure JS.

    Thank you for your help,

    Roel Voordendag



  2. Nikolay Iliev
    Nikolay Iliev avatar
    351 posts

    Posted 05 Jan Link to this post

    Hello Ruei,

    The choice between TypeScript and JavaScript is purely based on the developer's preferences and is not limiting any functionality.
    Every code in TS can be implemented in JS just by using the proper syntax refactoring. In fact, each NativeScritp application written in TypeScript is down transpiled to
    JavaScript when you are building the application the TypeScript transpilation is creating.Corresponding JavaScript files and these JS files are the ones that are used in your build application. The TypeScript files are used only during development as TS provides better tooling and also typing.
    For example, if you build this sample application (written in TypeScript) with tns build android command one if the first thing to happen during the build script is to execute the TypeScript transpilation with tsc, and if there are no TS errors all TypeScript files will be transpiled to JavaScript, and respective JS files will appear.

    So if you need to convert any TypeScript code to JavaScript, you can install TypeScript and run tsc. Another option is to create dummy TypeScript project with tns create myApp --tsc and than paste the TS code and run tns build android (or just tsc) and you will receive created JavaScript counterparts for each TS file.

    Example for creating Guage programmatically via JavaScript
    var gauges_1 = require("nativescript-pro-ui/gauges");
    var observable_array_1 = require("data/observable-array");
    // Event handler for Page "navigatingTo" event attached in main-page.xml
    function navigatingTo(args) {
        var page = args.object;
        var gauge = createGauge();
        page.content = gauge;
    exports.navigatingTo = navigatingTo;
    function createGauge() {
        var gauge = new gauges_1.RadRadialGauge();
        var scale = new gauges_1.RadialScale(); // <gauge:RadialScale minimum="0" maximum="6" radius="0.90">
        scale.minimum = 0;
        scale.maximum = 6;
        scale.radius = 0.9;
        var scaleStyle = new gauges_1.ScaleStyle();
        scaleStyle.majorTicksCount = 7;
        scaleStyle.minorTicksCount = 9;
        scaleStyle.lineThickness = 0;
        scaleStyle.labelsCount = 7;
        scaleStyle.ticksOffset = 0;
        scale.scaleStyle = scaleStyle;
        var indicator = new gauges_1.RadialBarIndicator();
        indicator.minimum = 0;
        indicator.maximum = 1.2;
        indicator.location = 0.97;
        scale.indicators = new observable_array_1.ObservableArray();
        gauge.scales = new observable_array_1.ObservableArray();
        return gauge;

    The above demonstrated in TypeScript can be found here.

    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.
  3. Roel
    Roel avatar
    10 posts
    Member since:
    Jan 2018

    Posted 07 Jan in reply to Nikolay Iliev Link to this post

    Thank You, Nikolay for your help. 
Back to Top