Using Angular.JS to bind a JSON value to a Syncfusion Circular gauge

Question

I am working on a project using Syncfusion Javascript gauge control to display a weekly pay bonus. The data is stored on a SharePoint list. I wrote a javascript 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));
    }
})

Then the value is placed in this Div.

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

Basically what I would like to do is bind the data to the Syncfusion control which is set up like this:

$("#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"
                }],
            }]
        });

Then the gauge is created inside this:

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

The gauge will build but I cannot get the gauge to recieve the value.

If anyone has any ideas on how I can make this work or things I'm doing I would greatly appreciate any input! Thanks everyone! EDIT: The synfusion software creates a gauge and changes the needle based on a number value thats given to it. My ajax call pulls a number entered into a Sharepoint list and then displays that in a div.

Answer 1

In the above code snippet you mentioned the passing value as “String”. If you pass the string value to the loop it will concatenate as string value only. But we need to pass the integer value to the Circular Gauge properties(width, height, distancefromscale) to take effect. Hence, change the code snippet with the following.

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

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

And we have prepared the sample to meet your requirement with the MVC application including the “.mdf” database. We have created the table called “GaugeData” and added the two record. And using the “$.ajax” called the action method “GetData” and received the “JSON” data from the controller. Refer the following code snippet.

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);
    }

}

And then assigned the calculated value to the gauge property. Here, I have used the “MajorDistanceFromScale” value read from the database record and assigned to the gauge properties. Refer the following coding 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"
                        }],
                    }]
                });

And also please refer the below attached sample for more reference. GaugeListSample