Web dashboard - change needle color or show different colored ranges in gauge

hi… thanks… but, I don't know why this error… I update the Project to 16.2.6… but still continue the error attach… in tour project

but, the real problem is that I use dinamic data… look winforms Works…
(I will go to try change in your sample, but the error above… )

thanks…

Visual Basic
Try  
               Dim sPathd As String = System.Windows.Forms.Application.StartupPath & "\" & pasta & "\ini\" &  
                                      tabpag() & "\" & name & "_scales.ini"  
               If File.Exists(sPathd) Then  
                   Dim valor1 As String = ""  
                   Dim valor2 As String = ""  
                   Dim cor As String = ""  
                   Dim percent As String = ""  
                   Dim sr As New StreamReader(sPathd)  
                   Dim range1b As New ArcScaleRange  
                   Dim range1c As New ArcScaleRange  
                   Dim range1d As New ArcScaleRange  
                   Dim range1e As New ArcScaleRange  
                   Dim i As Integer = 0  
                   While sr.Peek <> -1  
                       valor1 = sr.ReadLine  
                       'If InStr(LCase(valor1), "select") > 0 Then _  
                       valor1 = ExecutaSQLScalar(repc(repq(valor1), ""), xstring)  
                       valor2 = sr.ReadLine  
                       'If InStr(LCase(valor2), "select") > 0 Then _  
                       valor2 = ExecutaSQLScalar(repc(repq(valor2), ""), xstring)  
                       cor = sr.ReadLine  
                       percent = sr.ReadLine  
                       'percent = "False"  
                       If valor1 <> "" And valor2 <> "" And cor <> "" Then  
                           Dim cor1 As New Color  
                           cor1 = Color.FromName(cor)  
                           gauge.Scales(0).MajorTickCount = 6  
                           'gauge.Scales(0).Ranges.Add(CreateNewRange(valor1, valor2, cor1, percent))  
                           Dim range1a As New ArcScaleRange  
                           range1a.AppearanceRange.ContentBrush = New SolidBrushObject(cor1)  
                           If percent <> "True" Then  
                               range1a.StartValue = valor1  
                               range1a.EndValue = valor2  
                           Else  
                               range1a.StartPercent = valor1 / 100  
                               range1a.EndPercent = valor2 / 100  
                           End If  
                           range1a.Name = Trim(i)  
                           i = i + 1  
                           gauge.Scales(0).Ranges.AddRange(New DevExpress.XtraGauges.Core.Model.IRange() {range1a})  
                           'gauge.Scales(0).Ranges.Add(CreateNewRange(200000 * i, 600000 * i, Color.Yellow))  
                       End If  
                   End While  
                   sr.Close()  

Hi Aljr,

I have upgraded the original sample project to the latest version of DevExpress assemblies (v16.2.6) and tested it locally. Attached is an updated example. Please try to process your solution files using the Project Converter tool and then perform the Clean operation before rebuilding the solution in Visual Studio IDE. From what I gather, you are using a custom SQL query result (ExecutaSQLScalar) when initializing the Range StartValue/EndValue properties. While the Dashboard does not provide a special method to execute SQL queries using the client-side API, you can use the ASPxHiddenField component to store values from a SQL query (e.g., using the Page_Load event) and extract them in the client-side code.

Hi!
I'm trying now to use in my test code… but doesn't Works… look…

follow my test code, only run defaultw…
* look, I add viewer dinamically, "dash1.ClientSideEvents"

thanks again!

The "hf.Get("Test")" statement from my example is related to the ASPxHiddenField component (hf is the ASPxHiddenField client-side identifier). It appears that you are using the same ClientInstanceName value (dashboardViewer) for both the ASPxHiddenField and ASPxDashboardViewer. As a result, a conflict occurs. To resolve this, specify a different client-instance identifier for the ASPxHiddenField component.

no, no…
in my sample, I don't have hidden fields… I don't use "hf", I remove it…
run for you see…

look attach…

Aljr,

It seems that you are referring to missing range elements. They are not visible because defined range intervals are too small relative to the maximum scale value (10M). For instance, you can increase the range intervals as shown in the updated code snippet:

JavaScript
gauges[i].option('rangeContainer', {  
               ranges: [  
                   { startValue: 0, endValue: 2000000, color: 'dodgerblue' },  
                   { startValue: 2000000, endValue: 4000000, color: 'lightskyblue' },  
                   { startValue: 4000000, endValue: 6000000, color: 'yellow' },  
                   { startValue: 6000000, endValue: 8000000, color: 'orange' },  
                   { startValue: 8000000, endValue: 10000000, color: 'firebrick' }  
               ]  
           });  

humm… really, thanks! now Works…

and, about percent!? look attach…

how I can see my real end value? 1.848.000…
(show round to 2M)

I comente some lines… but still continue round…

Hi Aljr,

At present, the client-side Gauge widget does not support percentages for range values. Only startValue and endValue options are supported (see ranges). Please also check the customizeText event usage shown in the How to format numbers displayed by different web dashboard items in a custom manner ticket. This event should allow you provide a custom format for gauge values at runtime.

I can to calculate my percent over "endvalue"… but do you know why endvalue is undefined?
value is correct = 1.848.000 but endvalue will be 2.000.000

thanks!

The gauge (dxCircularGauge) does not support the "endValue" option. This option is accessible in the scale object context (see scale.endValue). For instance, you can use the following approach to synchronize the scale endValue and gauge value options:

JavaScript
        var gauges = e.GetWidget();  
        for (var i = 0; i < gauges.length; i++) {  

            gauges[i].option("scale", {  
                startValue: 0,  
                endValue: gauges[i].option("value")  
            });  
..  

hum… but how I get the value to my var…

I need, for example…

var endvalue = gauges[i].option("scale", {
                endValue: gauges[i].option("value")
            });

Because, if I had "endvalue" var, I can to calculate percent!!
My user say… 30%… and I to do: endvalue * 0.3 … for the value range!! do you understand!

this way, Works percent!

thanks!!!

Hi Aljr,

Unless I am mistaken, you need to initialize range startValue/endValue options based on the current gauge scale value. If so, you can use the following approach:

JavaScript
var roundValue = Math.round(gauges[i].option("value"));  

           var range1 = roundValue * 0.2; // 20%  
           var range2 = roundValue * 0.5; // 50%  
           var range3 = roundValue * 0.75; // 75%  

           gauges[i].option('rangeContainer', {  
               ranges: [  
                   { startValue: 0, endValue: range1, color: 'dodgerblue' },  
                   { startValue: range1, endValue: range2, color: 'lightskyblue' },  
                   { startValue: range2, endValue: range3, color: 'yellow' }  
               ]  
           });  

1- hum… but "value" is not correct… I need to calculated over "endvalue"!!
look print1, the last range3 is over "value"  : 1.848.000

but, the endvalue is "2.000.000" !

2- this is the second question… I need that endvalue will be the same of value… and not more…

thanks!

Aljr,

It is unclear whether you are referring to the "print1" screenshot because you haven't uploaded the corresponding file with your latest comment. However, if you need to print the exact value in the gauge scale, use the customTicks option as shown in the updated code snippet:

JavaScript
  for (var i = 0; i < gauges.length; i++) {  

            gauges[i].option("scale", {  
                startValue: 0,  
                endValue: gauges[i].option("value"),  
                customTicks: [0, gauges[i].option("value")]  
            });  
..  

ok… but I can to use "customTicks" in this calculate… ?!

var range1 = customTicks * 0.2; // 20%
…

The customTicks option represents an array of custom major ticks. This means that you can display your custom tickmarks on the gauge scale. This array cannot be multiplied by a number because it may contain multiple elements. However, you can use any other custom logic when initializing range values in your code.

humm… I need only the max number of gauge…
in my print, is 2.000.000

!?

Aljr,

Could you please clarify what you mean by the "max number" in this context? Do you want to display a custom tickmark with a predefined scale value? If possible, upload the modified sample project and include screenshots to illustrate your requirements. This should make the situation clearer.

so… look my print attach…
My value is 1.848.000… where from the last value 2.000.000 ?  is na automatic value created from gauge?

1- I need calculated our percent from 2.000.000 !
2- or, better… to do my 1.848.000 value the last number, instead of 2.000.000 !! do you understand? this is the better!

thanks!

hummm…

I apply your code… and yes… now the last value is my value!! great… its work…

JavaScript
gauges[i].option("scale", {  
                startValue: 0,  
                endValue: gauges[i].option("value")  
            });  

but, instead of my "value"… how I can make endvalue the biggest of "value" or "objective"…
Sometimes, "objective" value can be bigger than "value"…

2- and for winforms! I have other ticket ask this… how I can to set the endvalue using the biggest between value or objective…
thanks!!!

Alex…

3- now, I'm prepare to my code…
look attach, I read range1/range2/color in an array…

And I tried add one to one… the ranges… from array…

but, show this error… how I can add ranges one to one?

thanks!

Hi!
I prepare my sample to you…

only run defaultw… look… I read from my "ini", store in a array and run in javascript…
But I don't know how I add all array ranges…

thanks!

Hi Aljr,

Thank you for posting your sample project. The problem occurs because you have defined an inner FOR loop using the same counter variable (i) as the enclosing FOR loop. Please refer to the updated code snippet:

JavaScript
if (esca != '') {  
    var escaa = esca.split("|");  
    for (var j = 0; j < escaa.length; j++) {  
        var escala = escaa[j].split(",");  
        if (escala.length == 4) {  
            var range1 = escala[0] * roundValue / 100;  
            var range2 = escala[1] * roundValue / 100;  

            var cor = escala[2];  
        }  

        gauges[i].option('rangeContainer', {  
            ranges: [  
            { startValue: range1 , endValue: range2, color: cor }  
            ]  
        });  
    }  

}  

In addition, I have modified the scale startValue and endValue property calculation logic. If necessary, you can populate the customTicks collection to force displaying a predefined tickmark label instead of an auto-generated one. If you need further assistance, let me know.

Hi!
I change to "j" in loop… but still continue… he only paint the Second color…
(I doesn't understand about "customTicks collection)…

thanks!

JavaScript
for (var j = 0; j < escaa.length; j++) {  
                                var escala = escaa[j].split(",");  
                                if (escala.length == 4) {  
                                    var range1 = escala[0];  
                                    if (escala[3] == 'True') range1 = range1 * roundValue / 100;  
                                    var range2 = escala[1];  
                                    if (escala[3] == 'True') range2 = range2 * roundValue / 100;  
                                    var cor = escala[2];  
                                }  

                                gauges[i].option('rangeContainer', {  
                                    ranges: [  
                                    { startValue: range1, endValue: range2, color: cor }  
                                    ]  
                                });  
                            }  

Hi,

Use the following approach to add new items to the ranges collection without overwriting it.

JavaScript
if (esca != '') {  
              var escaa = esca.split("|");  
              for (var j = 0; j < escaa.length; j++) {  
                  var escala = escaa[j].split(",");  
                  if (escala.length == 4) {  
                      var range1 = escala[0] * roundValue / 100;  
                      var range2 = escala[1] * roundValue / 100;  

                      var cor = escala[2];  
                  }  
                  var robj = {};  
                  robj["startValue"] = range1;  
                  robj["endValue"] = range2;  
                  robj["color"] = cor;  
                  var cont = gauges[i].option('rangeContainer');  
                  if (cont == null)  
                      cont = { ranges: [] };  
                  cont.ranges.push(robj);  
                  gauges[i].option('rangeContainer', cont);  
              }  

          }  

As for displaying custom scale labels, I have already provided a sample code snippet to illustrate how to add two custom labels (ticks) to the customTicks collection.

JavaScript
gauges[i].option("scale", {  
               startValue: 0,  
               endValue: gauges[i].option("value"),  
               customTicks: [0, gauges[i].option("value")]  
           });  

Hi!

How I change for ger the ENDVALUE?
I tried endValue, endvalue, but doesn't Works!

JavaScript
var roundValue = Math.round(gauges[i].option("value"));  

In the attach, I need get the endvalue 30K !!

Use the following approach to obtain the current scale maximum (end) value:

JavaScript
var scaleValue = gauges[i].option("scale.endValue");  

Is this the value you are looking for?

Alex, for MaxValue ok…

but, for GOAL and ACTUAL value?
winforms I use this information… and for web…

If Gauge.Markers.Count > 0 Then meta = Gauge.Markers(0).Value

If Gauge.Needles.Count > 0 Then atual = Gauge.Needles(0).Value

thanks!

Hi Ario,

Please refer to my yesterday's comment in the How to initialize the scale range using the target value ticket:

Circular GaugeIndicator elements (markers, needles) are customized using the valueIndicator option.

The main gauge value is mapped to the "Actual" measure and represented by the value indicator. So, you can use the dxCircularGauge.value property to determine the actual needle location.

The marker element is mapped to the "Target" measure and represented by the subvalueIndicator element. To access a set of associated values, use the subvalues collection.

While we haven't published information related to specifics of Dashboard items' rendering because it is a subject to change, it is always possible to use the Developer Tools (F12) console window to examine the actual dxCircularGauge state at runtime (see the screenshot below).

I hope this helps.