Leveraging the power of Angular.JS to synchronize a JSON value with a Syncfusion Circular gauge

Question

Leveraging the power of Angular.JS to synchronize a JSON value with a Syncfusion Circular gauge

I've been working on a project that involves using the Syncfusion Javascript gauge control to show a weekly pay bonus. The data for this is stored in a SharePoint list, and I have written a JavaScript code to convert the SharePoint list from XML to JSON.

<script type="text/javascript">
$ajax({
    url: "/_api/web/lists/GetByTitle('bonusEntry')/items?$orderby=Date desc&$filter=Department eq 'Meltshop'&$top=1",
    type: "GET",
    headers: {
        "accept":"application/json;odata=verbose",
    },
    success: function (data) {      
        var newMsBonus = "";
            for(i=0; i < data.d.results.length; i++){
                newMsBonus = newMsBonus + "<div>" + data.d.results[i].ACrew + "</div>";
        }
            $('#oDataanalysisScoreBoard').html(newMsBonus);
    },
    error: function (error) {
        alert("error: " + JSON.stringify(error));
    }
})

Following this, the value retrieved is placed in this specific Div.

<div id="oDataanalysisScoreBoard"></div>

My main goal is to bind this data to the Syncfusion control setup as shown below:

$("#CircularGauge1").ejCircularGauge({
            width: 500,
            height: 500,
            backgroundColor: "#3D3F3D",
            readOnly: false,
            scales: [{
                ticks: [{
                    type: "major",
                    distanceFromScale: 70,
                    height: 20,
                    width: 3,
                    color: "#ffffff"
                }, {
                    type: "minor",
                    height: 12,
                    width: 1,
                    distanceFromScale: 70,
                    color: "#ffffff"
                }],
            }]
        });

The gauge itself is created within this container:

<div id="CircularGauge1"></div>

Even though the gauge is successfully built, I'm facing issues with passing the value to it.

If anyone has any suggestions or insights on how I can resolve this issue or if there are any improvements I can make, your feedback would be greatly appreciated! Thank you all! EDIT: The Syncfusion software generates a gauge and adjusts the needle according to a numerical input. My AJAX call fetches a number from a SharePoint list and displays it in a div.

javascript json angularjs sharepoint syncfusion

Answer 1

Answer №1

Your code snippet mentions passing the value as a "String". If the string value is passed to the loop, it will concatenate as a string value only. However, in order for Circular Gauge properties (width, height, distanceFromScale) to take effect, integer values need to be passed instead. Therefore, modify the code snippet as shown below:

                  $.ajax({
            url: "/Gauge/GetData",
            type: "POST",
            success: function (data) {
                var newMsBonus = 0;
                for (i = 0; i < data.length; i++) {
                    newMsBonus = newMsBonus + data[i].MajorDistanceFromScale;   // Using MajorScale distanceFromScale value for demo
                }

                $('#oDataanalysisScoreBoard').html(newMsBonus);
                 },
            failure: function (error) {
                alert("No data available");
            }
        });

We have prepared a sample MVC application with an ".mdf" database meeting your requirements. A table called "GaugeData" has been created with two records. The "$.ajax" method calls the action method "GetData" to retrieve JSON data from the controller. See the code snippets below.

View Page:

            $.ajax({
            url: "/Gauge/GetData",
            type: "POST",
            success: function (data) {},
            failure: function (error) {
           }
        });

Controller Page:

 public class GaugeController : Controller
{
    GaugeDataDataContext db = new GaugeDataDataContext();

    public JsonResult GetData()
    {
        IEnumerable data = db.GaugeDatas.Take(500); 
        return Json(data, JsonRequestBehavior.AllowGet);
    }

}

The calculated value is then assigned to the gauge property. The "MajorDistanceFromScale" value from the database record is used and assigned to the gauge properties. Refer to the following code snippet.

                var distanceValue = parseInt($("#oDataanalysisScoreBoard")[0].innerHTML);
                $("#CircularGauge1").ejCircularGauge({
                    width: 500,
                    height: 500,
                    backgroundColor: "#3D3F3D",
                    readOnly: false,
                    scales: [{
                        ticks: [{
                            type: "major",
                            distanceFromScale: distanceValue,
                            height: 20,
                            width: 3,
                            color: "#ffffff"
                        }, {
                            type: "minor",
                            height: 12,
                            width: 1,
                            distanceFromScale: 70,
                            color: "#ffffff"
                        }],
                    }]
                });

For more reference, please check out the attached sample: GaugeListSample

Answer 2

Your code snippet mentions passing the value as a "String". If the string value is passed to the loop, it will concatenate as a string value only. However, in order for Circular Gauge properties (width, height, distanceFromScale) to take effect, integer values need to be passed instead. Therefore, modify the code snippet as shown below:

                  $.ajax({
            url: "/Gauge/GetData",
            type: "POST",
            success: function (data) {
                var newMsBonus = 0;
                for (i = 0; i < data.length; i++) {
                    newMsBonus = newMsBonus + data[i].MajorDistanceFromScale;   // Using MajorScale distanceFromScale value for demo
                }

                $('#oDataanalysisScoreBoard').html(newMsBonus);
                 },
            failure: function (error) {
                alert("No data available");
            }
        });

We have prepared a sample MVC application with an ".mdf" database meeting your requirements. A table called "GaugeData" has been created with two records. The "$.ajax" method calls the action method "GetData" to retrieve JSON data from the controller. See the code snippets below.

View Page:

            $.ajax({
            url: "/Gauge/GetData",
            type: "POST",
            success: function (data) {},
            failure: function (error) {
           }
        });

Controller Page:

 public class GaugeController : Controller
{
    GaugeDataDataContext db = new GaugeDataDataContext();

    public JsonResult GetData()
    {
        IEnumerable data = db.GaugeDatas.Take(500); 
        return Json(data, JsonRequestBehavior.AllowGet);
    }

}

The calculated value is then assigned to the gauge property. The "MajorDistanceFromScale" value from the database record is used and assigned to the gauge properties. Refer to the following code snippet.

                var distanceValue = parseInt($("#oDataanalysisScoreBoard")[0].innerHTML);
                $("#CircularGauge1").ejCircularGauge({
                    width: 500,
                    height: 500,
                    backgroundColor: "#3D3F3D",
                    readOnly: false,
                    scales: [{
                        ticks: [{
                            type: "major",
                            distanceFromScale: distanceValue,
                            height: 20,
                            width: 3,
                            color: "#ffffff"
                        }, {
                            type: "minor",
                            height: 12,
                            width: 1,
                            distanceFromScale: 70,
                            color: "#ffffff"
                        }],
                    }]
                });

For more reference, please check out the attached sample: GaugeListSample

Leveraging the power of Angular.JS to synchronize a JSON value with a Syncfusion Circular gauge

Answer №1

Similar questions

What is the process of implementing a service in AngularJS?

Is there a way I can run certain code asynchronously before my service methods are invoked?

Trouble displaying Firestore data in Vuejs with v-html update feature not functioning as expected

Print the content from the selected tab in AngularJS UI tab

Instructions for incorporating a glyphicon glyphicon-calendar into a bootstrap dropdown using pug

Refine objects based on their properties without removing them from the dataset

Is Node.js categorized as multithreading due to its utilization of worker threads?

JavaScript: Unusual behavior discovered in forEach iteration

Encountering errors when initializing a JavaScript module through Angular2 instantiation

Discovering the version of the Javascript library utilized on a website - a step-by-step guide

Ramjet: Unveiling the Magic of Making Elements Appear and Disappear

"Implementing a UITableView alphabetical index feature for efficiently displaying vast amounts of

Swirling hues transforming into #000000 upon second attempt

Sharing data between controllers in angular 1.5 components for effective communication

Using Python to generate a JSON file containing a list of artifacts through a loop

Eliminate the alert message that appears when dynamically rendering a React styled component

What is the best way to augment an AJAX array response with additional data?

change visibility:hidden to visible in a css class using JavaScript

Pass the form data to a Bootstrap modal upon submission of the form

Tips for preventing the occurrence of numerous instances of braintree.setup in Angular