Telerik Forums
This is a migrated thread and some comments may be shown as answers.

Why does this happen to my app?

8 Answers 62 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Roel
Top achievements
Rank 1
Roel asked on 08 Jan 2018, 02:54 PM

Hi, 

I am trying to use gauges but every time I want to use multiple gauges with this layout my app crashes and gives me this error(see picture for error). This is the code I use.

    

<Page xmlns:navigation="navigation/example-page" loaded="onPageLoaded" navigatedTo="onNavigatedTo" xmlns:gauge="nativescript-pro-ui/gauges" xmlns="http://www.nativescript.org/tns.xsd">

<StackLayout id="lmao">
<gauge:RadRadialGauge id="gaugeView" margin="10">
<gauge:RadRadialGauge.scales>
<gauge:RadialScale startAngle="0" sweepAngle="360" minimum="0" maximum="100" radius="0.9">
<gauge:RadialScale.scaleStyle>
<gauge:ScaleStyle ticksVisible="false" labelsVisible="false" lineThickness="0" />
</gauge:RadialScale.scaleStyle>
<gauge:RadialScale.indicators>
<StackLayout id="lol">
<gauge:RadialBarIndicator minimum="0" maximum="100" location="0.5">
<gauge:RadialBarIndicator.indicatorStyle>
<gauge:BarIndicatorStyle fillColor="rgba(224,151,36,0.5)" barWidth="0.2"/>
</gauge:RadialBarIndicator.indicatorStyle>
</gauge:RadialBarIndicator>
<gauge:RadialBarIndicator minimum="0" maximum="0" location="0.5" isAnimated="true">
<gauge:RadialBarIndicator.indicatorStyle>
<gauge:BarIndicatorStyle cap="Round" fillColor="rgba(224,151,36,1)" barWidth="0.2"/>
</gauge:RadialBarIndicator.indicatorStyle>
</gauge:RadialBarIndicator>
<gauge:RadialBarIndicator minimum="0" maximum="100" location="0.75">
<gauge:RadialBarIndicator.indicatorStyle>
<gauge:BarIndicatorStyle fillColor="rgba(196,241,57,0.5)" barWidth="0.2"/>
</gauge:RadialBarIndicator.indicatorStyle>
</gauge:RadialBarIndicator>
<gauge:RadialBarIndicator minimum="0" maximum="0" location="0.75" isAnimated="true">
<gauge:RadialBarIndicator.indicatorStyle>
<gauge:BarIndicatorStyle cap="Round" fillColor="rgba(196,241,57,1)" barWidth="0.2"/>
</gauge:RadialBarIndicator.indicatorStyle>
</gauge:RadialBarIndicator>
<gauge:RadialBarIndicator minimum="0" maximum="100" location="1">
<gauge:RadialBarIndicator.indicatorStyle>
<gauge:BarIndicatorStyle fillColor="rgba(132,235,247,0.5)" barWidth="0.2"/>
</gauge:RadialBarIndicator.indicatorStyle>
</gauge:RadialBarIndicator>
<gauge:RadialBarIndicator minimum="0" maximum="0" location="1" isAnimated="true">
<gauge:RadialBarIndicator.indicatorStyle>
<gauge:BarIndicatorStyle cap="Round" fillColor="rgba(132,235,247,1)" barWidth="0.2"/>
</gauge:RadialBarIndicator.indicatorStyle>
</gauge:RadialBarIndicator>
</StackLayout>
</gauge:RadialScale.indicators>
</gauge:RadialScale>
</gauge:RadRadialGauge.scales>
</gauge:RadRadialGauge>
</StackLayout>
<!-- << gauges-indicators-add-bars-xml -->
</Page>

Already much thanks,

Roel Voordendag

8 Answers, 1 is accepted

Sort by
0
Roel
Top achievements
Rank 1
answered on 08 Jan 2018, 02:55 PM
knipsel.png
Sorry I forgot to add the error
0
Nick Iliev
Telerik team
answered on 08 Jan 2018, 03:10 PM
Hi Roel,

The provided code snippet has a minor syntax error in the RadialScale indicators declaration.
Where the indicators should be directly part of the visual tree they are in fact wrapped in a StackLayout which is not permitted structure.
Remove the StackLayout from the indicators array and your UI will render as expected.

For example:
<gauge:RadRadialGauge id="gaugeView" margin="10">
    <gauge:RadRadialGauge.scales>
        <gauge:RadialScale minimum="0" maximum="100" radius="0.9" startAngle="0" sweepAngle="360" >
            <gauge:RadialScale.scaleStyle>
                <gauge:ScaleStyle ticksVisible="false" labelsVisible="false" lineThickness="0" />
            </gauge:RadialScale.scaleStyle>
            <gauge:RadialScale.indicators>
                <!-- REMOVE the opening StackLayout tag HERE -->
                    <gauge:RadialBarIndicator minimum="0" maximum="100" location="0.5">
                    <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle fillColor="rgba(224,151,36,0.5)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                    </gauge:RadialBarIndicator>
                    <gauge:RadialBarIndicator minimum="0" maximum="0" location="0.5" isAnimated="true">
                    <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(224,151,36,1)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                    </gauge:RadialBarIndicator>
                    <gauge:RadialBarIndicator minimum="0" maximum="100" location="0.75">
                    <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle fillColor="rgba(196,241,57,0.5)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                    </gauge:RadialBarIndicator>
                    <gauge:RadialBarIndicator minimum="0" maximum="0" location="0.75" isAnimated="true">
                    <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(196,241,57,1)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                    </gauge:RadialBarIndicator>
                    <gauge:RadialBarIndicator minimum="0" maximum="100" location="1">
                    <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle fillColor="rgba(132,235,247,0.5)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                    </gauge:RadialBarIndicator>
                    <gauge:RadialBarIndicator minimum="0" maximum="0" location="1" isAnimated="true">
                    <gauge:RadialBarIndicator.indicatorStyle>
                    <gauge:BarIndicatorStyle cap="Round" fillColor="rgba(132,235,247,1)" barWidth="0.2"/>
                    </gauge:RadialBarIndicator.indicatorStyle>
                    </gauge:RadialBarIndicator>
                <!-- REMOVE the closing StackLayout tag HERE -->
            </gauge:RadialScale.indicators>
        </gauge:RadialScale>
    </gauge:RadRadialGauge.scales>
</gauge:RadRadialGauge>


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.
0
Roel
Top achievements
Rank 1
answered on 08 Jan 2018, 03:27 PM

Hi Nikolay, 

Thank you for your first response.

But how do I get my gauges underneath each and text next to the gauges? Like in the picture? Is the best way the make multiple gauges or is there a better solution.

Thank you for your service,

Roel Voordendag

 

 

 

0
Roel
Top achievements
Rank 1
answered on 08 Jan 2018, 03:29 PM
example.png

Hi Nikolay,

Thank you for your first response.

But I want to have my gauges underneath each other and texts next to them like in the example picture but what is the best way to do this? Do I need to make multiple instances of the gauges? Or is there a better way?

Thank you for your service,

Roel Voordendag

0
Nick Iliev
Telerik team
answered on 08 Jan 2018, 03:36 PM
Hello Roel,

Indeed the described case would require to create different instances of RadRadialGauge and apply the text for each different gauge.
At this very moment, the only possibility for creating a description text is by applying a separate layout and introducing a custom set of layouts inside the indicators array is not supported.

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.
0
Roel
Top achievements
Rank 1
answered on 08 Jan 2018, 03:38 PM

Hi Nikolay, 

Is the best to maybe create a around a gauge and then make a gauge on the left side and the text on the right side and repeat the three times is that possible?

Regards,

Roel Voordendag

0
Roel
Top achievements
Rank 1
answered on 08 Jan 2018, 03:49 PM

And How do I change the indicators if I have multiple instances of radialGauges with different ?

Thank you for your help,

Roel Voordendag

0
Nick Iliev
Telerik team
answered on 09 Jan 2018, 07:24 AM
Hi Roel,

Based on the sent photo you can easily apply the business logic by providing three different indicators for "Time Slept", "Deep Sleep", and "Healthy Sleep".
You can create a GridLayout (or another layout of your preference) with two columns and three rows and place the first gauge in the top-left cell, the second in the middle-right cell and the last one in the bottom-left cell and respectively nest the text content in the opposite cells.
Not sure what you mean by "How do I change the indicators if I have multiple instances of radialGauges with different ?" but I am guessing that you have the same context that has to change the indicators values. If that is the case, you can easily achieve that by refusing g the same ViewModel for each of your new gauge instances.

Demonstration of the above technique can be found in this PlayGround demo.
Of course, using a separate gauge also allow you to use separate view model properties and update each gauge accordingly. 

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.
Tags
Gauges
Asked by
Roel
Top achievements
Rank 1
Answers by
Roel
Top achievements
Rank 1
Nick Iliev
Telerik team
Share this question
or