Gauges JS

[Roel]

Hi,

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

 

 

[Nick Iliev]

Hello ,

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 . 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();
    scale.indicators.push(indicator);
    gauge.scales = new observable_array_1.ObservableArray();
    gauge.scales.push(scale);
    return gauge;
}

The above demonstrated in TypeScript can be found here.

Regards,
Nikolay Iliev
Progress Telerik

[Roel]

Thank You, Nikolay for your help.