[Solved] Changing the value and/or ranges of a gauge dynamically in listView items

[Brendan]

Hello, 

Is it possible to display two different gauges in two different listView items using the same listView item template? I believe this is similar to the data binding feature you have with the charts but i cant figure out a way to work it for the gauges. For example, say i have two listView Items with gauges, part of the same listView using the same template but i want the rages and the values of each gauge in each listView item to be different but to display and animate properly in their own container. Something like if i had the data for the gauges in a js file that included the ranges of each gauge and the value of each gauge, etc but when created each gauge would look unique to the data provided. My goal in the future is to dynamically push this data so that the gauges update periodically allowing them to change value and look in their list view items. 

I hope that makes sense, i know its probably a little confusing. Please let me know if i can clarify more on what i mean. 

Thank You!

[Tsvetina]

Hello Brendan,

I am sending you a similar example with gauges. Data is defined in the serviceData.js file. I added a field to the listview datasource, containing a value for each gauge. 

With a timeout I traverse all gauges and set them the value from the item with the same index in the listview data source. If you have some kind of reordering, you can again use the approach with the hidden input which I showed in the chart example.

Regards,
Tsvetina
the Telerik team

[Brendan]

That is very helpful.

Is there a way to dynamically set the ranges as well, perhaps by passing in a variable from a local data array? For example like in the example with the columns, something like this...

<div class="gauge" data-win-control="Telerik.UI.RadRadialGauge" data-win-options="{
                min: 90,
                max: 100,
                majorUnit: 1,
                labels: {
                    template: Sample.getTemplate
                },
                majorTicks: {
                    visible: false
                },
                minorTicks: {
                    visible: false
                },
                ranges: [
                    {
                        from: range1,
                        to: range2,
                        color: 'range1Color'
                    },
                    {
                        from: range2,
                        to: range3,
                        color: 'range3Color'
                    },
                    {
                        from: range3,
                        to: range4,
                        color: 'range3Color'
                    }
        ],
                height: 200,
                width: 200,
                theme: 'light'
        }">
    </div>

Ranges 1, 2, 3, and 4 being numbers and range1Color, etc. being colors all set in a local array. This way not only the values can change dynamically but the ranges and colors as well. 

Is this sort of action supported or will i have to finagle it to work another way?

[Tsvetina]

Hello Brendan,

You can fill the ranges array in JavaScript after the gauges are initialized. The example below assigns ranges dynamically to each gauge. In this scenario they are identical, but it is up to you to decide how to structure local data it for each gauge.

My simple array of data is:

var ranges = [
    { from: 90, to: 92, color: "#33ccff" },
    { from: 92, to: 96.9, color: "#336699" },
    { from: 96.9, to: 97.1, color: "limegreen" },
    { from: 97.1, to: 100, color: "#333399" },
];

And the code modification needed to add the ranges is:

setTimeout(function () {
    var gauges = document.querySelectorAll(".gauge");
    for (var i = 0; i < gauges.length; i++) {
        var ranges = ChartSample.ranges;
        for (var j = 0; j < ranges.length; j++) {
            gauges[i].winControl.ranges.push({ from: ranges[j].from, to: ranges[j].to, color: ranges[j].color });
            gauges[i].winControl.redraw();
        }
        gauges[i].winControl.value = ChartSample.rawListData[i].value;
    }
}, 100);

Make sure that you call redraw() after setting the ranges and before setting the value.

Modified sample can be found in the attachment.

Greetings,
Tsvetina
the Telerik team

[Brendan]

I wasn't sure whether to start a new thread or not so i figured i would post my question here because it has a lot to do with the previous posts in this thread.

You have been very helpful in implementing your controls in list view items in the default pages. I am in the process of trying to figure out how to add them to a separate page (as if using the navigation to switch between pages) which seems to be a completely different monster. I have looked through the microsoft tutorials and the code provided in your sample app because it seems to do a similar thing but cannot seem to put everything in the right place. I think the biggest issue i am having is getting everything implemented the right way i.e. putting the list view items with the gauges in the pages js correctly as well as where to put the timeout function to get the gauges to show on the page,

setTimeout(function () {
                    var gauges = document.querySelectorAll(".gauge");
                    for (var i = 0; i < gauges.length; i++) {
                        gauges[i].winControl.value = GaugeSample.rawListData[i].values;
                    }
                }, 100);

should this go in the new pages ready function?

WinJS.UI.Pages.define("/pages/HomePage/Home.html", {
        // This function is called whenever a user navigates to this page. It
        // populates the page elements with the app's data.
        ready: function (element, options) {
            // TODO: Initialize the page here.
},

Perhaps you could point me in the right direction of how these gauges in listview items would fit in a seperate page.
Thanks you again for all your help!

[Tsvetina]

Hello Brendan,

You guessed right, to achieve equivalent result in a Navigation app, you should copy the code to the ready event of the page.

I prepared a sample where I moved the exact same logic to a Navigation app, where the gauge is in its own page, and it seems ok on my side. Give it a try and let us know if it works as expected on your end.

Regards,
Tsvetina
the Telerik team

[Brendan]

It works great. Just what I was looking for.

Thanks so much for all your help! You guys have been a godsend.