We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Working Example Using Razor Pages

Thread ID:

Created:

Updated:

Platform:

Replies:

141753 Jan 2,2019 06:31 PM UTC Jan 8,2019 01:23 PM UTC ASP.NET Core - EJ 2 5
loading
Tags: Circular Gauge
Teal Wilkes
Asked On January 2, 2019 06:31 PM UTC

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 [Syncfusion]
Replied On January 3, 2019 09:26 AM UTC

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: 
 
 
Thanks, 
Dharani. 


Teal Wilkes
Replied On January 3, 2019 07:13 PM UTC

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 [Syncfusion]
Replied On January 4, 2019 06:14 AM UTC

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: 
 
 
 
Thanks, 
Dharani. 


Teal Wilkes
Replied On January 7, 2019 12:42 PM UTC

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 [Syncfusion]
Replied On January 8, 2019 01:23 PM UTC

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. 
 
 
Thanks, 
Dharani. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;