Working Example Using Razor Pages

[Teal Wilkes]

Is it possible to get a working example of the Circular Gauge using Razor Pages? If possible have an example of the pointer value being modified via the .cs file. Thanks.

[Dharanidharan Dharmasivam]

Hi Teal, 

 

Greetings from Syncfusion.  

We have analyzed your requirement. We have prepared a sample in which we have updated the pointer value in button click event by fetching data from server using ajax request. This can be changed with respect to your scenario.  

 

[LinearGauge.cshtml] 

 

<input type="button" id="btn" onclick="Update()" value="Update Pointer" /> 

 

function Update() { 

         $.ajax({ 

            url: "@Url.Action("GetPointer", "LinearGauge")", 

            //… 

            success: function (value) { 

                var linearGaugeObj = document.getElementById('linear').ej2_instances[0], 

                    axisIndex = 0, pointIndex = 0; 

                Using the setPointerValue method updated the pointer value 

                linearGaugeObj.setPointerValue(axisIndex, pointIndex,value) 

            } 

        }); 

    } 

 

[LinearGaugeController.cs] 

 

public IActionResult GetPointer() 

        { 

            //… 

            return Json(pointerValue); 

        } 

 

 

Screenshot: 

Before Updating Pointer Value:  

 

After Updating Pointer Value: 

 

Sample: http://www.syncfusion.com/downloads/support/forum/141753/ze/LinearGauge1901305544  

 

Thanks, 

Dharani. 

[Teal Wilkes]

Is there  a way to push data from the controller to the gauge? Also is it possible add additional gauges dynamically based on an event from elsewhere? Ideally I'm looking to add a gauge when an outside connection occurs and update the gauge from values sent from these outside connections.

[Dharanidharan Dharmasivam]

Hi Teal, 

 

Kindly find the response for your queries below. 

 

Query #1: Is there  a way to push data from the controller to the gauge? 

We can initialize the gauge properties in controller and then using pass to view page using the ViewBag. Find the code snippet below. 

 

[CircularGaugeController.cs] 

 

    Create the required properties for the gauge. Here we have created axes for the circular gauge and pass it to view page using ViewBag 

  CircularGaugePointer pointer = new CircularGaugePointer(); 

  pointer.Value = 70; 

 

  CircularGaugeAxis axis = new CircularGaugeAxis(); 

  axis.Pointers = new List<CircularGaugePointer>(); 

  //… 

  axis.Pointers.Add(pointer); 

  List<CircularGaugeAxis> Axes = new List<CircularGaugeAxis>(); 

  Axes.Add(axis); 

  ViewBag.gaugeAxes = Axes; 

 

 

[CircularGauge.cshtml] 

 

<ejs-circulargauge id="circular" width="200" height="200" axes="ViewBag.gaugeAxes"> 

</ejs-circulargauge> 

 

 

 

Query #2: Also is it possible add additional gauges dynamically based on an event from elsewhere? Ideally I'm looking to add a gauge when an outside connection occurs and update the gauge from values sent from these outside connections. 

In a button click event we have added the circular gauge dynamically by fetching pointer value from server using ajax request. You can change this with respect to your requirement. Find the code snippet below to achieve this requirement. 

 

 

<input type="button" value="Add Gauge" onclick="addGauge()" id="Gauge" /> 

 

function addGauge() { 

 

        $.ajax({ 

            url: "@Url.Action("GetPointer", "CircularGauge")", 

            dataType: "json", 

            type: "POST", 

            success: function (pointerValue) { 

                In Ajax success event we have created element dynamcially 

                var gaugeEle = document.createElement('div'); 

                gaugeEle.id = 'circularGauge' + count; 

                document.getElementById('gaugeContainer').appendChild(gaugeEle); 

                Created gauge 

                var currentGauge = new ej.circulargauge.CircularGauge({ 

                    axes: [{ 

                        pointers: [{ 

                            Assigned pointer value from server 

                            value: pointerValue 

                        }] 

                    }] 

                }); 

                currentGauge.appendTo('#' + gaugeEle.id); 

                count++; 

            } 

        }); 

         

    } 

 

 

 

Screenshot: 

After adding multiple gauge: 

 

 

Sample: http://www.syncfusion.com/downloads/support/forum/141753/ze/CircularGauge-1173128875  

 

Thanks, 

Dharani. 

[Teal Wilkes]

Thanks, so this shows how to add and to set the point value on creation, but it doesn't allow me to update the value for each gauge from the code. I've setup a timer to update the value but this value is never reflected on the gauge itself. Essentially, I'm starting with a blank page, then I'll be adding gauges dynamically which each one will also need to be updated independently from the code. Also refreshing the page removes the dynamically added gauges. 

[Dharanidharan Dharmasivam]

Hi Teal, 

 

Query #1: But it doesn't allow me to update the value for each gauge from the code. I've setup a timer to update the value but this value is never reflected on the gauge itself.  

We have prepared a sample in which we have updated the gauge at certain interval (or every 5 seconds once with setInterval method) using the setPointerValue method of circular gauge. And the pointer value is updated properly at our end. Find the code snippet below to achieve this. 

 

<input type="button" value="Update Pointer" onclick="updateGauge()" id="Gauge" /> 

 

function updateGauge() { 

        setInterval(function () { 

            $.ajax({ 

                url: "@Url.Action("GetPointer", "CircularGauge")", 

                dataType: "json", 

                type: "POST", 

                success: function (pointerValue) { 

                    Get instance of gauge and update the pointer value 

                    var currentGauge = document.getElementById('circular').ej2_instances[0]; 

                    currentGauge.setPointerValue(0, 0, pointerValue); 

                } 

            }); 

        }, 5000); 

    } 

 

 

Query #2: Essentially, I'm starting with a blank page, then I'll be adding gauges dynamically which each one will also need to be updated independently from the code. Also refreshing the page removes the dynamically added gauges.  

We have button click event in which we have added gauges dynamically at a certain interval and after adding four gauges we have cleared the interval. And using the setPointerValue method you can update the pointer value. Also, we have ensured by refreshing the entire page, the gauge is not removed. Kindly modify the attached sample or provide your sample to replicate the issue. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/141753/ze/GaugePointerValue1642126549  

 

Thanks, 

Dharani.