Set value using Json

[LeoSquallParticipant]

Hi,
I have a problem that i don’t know to solve. I want to set the value of GaugeChart from an external file using json but i don’t know how to do it. Can someone help me please?

This is the code of my Page .aspx :

<script type=”text/javascript”>
$(document).ready(function () {

var labels = { visible: false, position: ‘inside’ };

//———————————————–

var dataAdapter = new $.jqx.dataAdapter(source,
{
//autoBind: true,
//async: false,
downloadComplete: function () { },
loadComplete: function (cruscottoList) {
var listvalue = cruscottoList[0];
valore = listvalue.valore;
},
loadError: function () { }
});
//——————————————

//Creazione del grafico
$(‘#gauge’).jqxGauge({
//Definizione dei range dei valori
ranges: [{ startValue: 0, endValue: 140, style: { fill: ‘#00e600’, stroke: ‘#e2e2e2’ }, endWidth: 20, startWidth: 20 },
{ startValue: 140, endValue: 180, style: { fill: ‘#ffff00’, stroke: ‘#ffff00’ }, endWidth: 40, startWidth: 20 },
{ startValue: 180, endValue: 220, style: { fill: ‘#ff0000’, stroke: ‘#ff0000’ }, endWidth: 60, startWidth: 40 }
],
cap: { radius: 1 },
//inserimento dell’etichetta
caption: { offset: [0, -20], value: ‘Gamma Ufficio’, position: ‘bottom’ },
style: { stroke: ‘#ffffff’, ‘stroke-width’: ‘1px’, fill: ‘#ffffff’ },
animationDuration: 1500,
labels: labels,
ticksMinor: { interval: 5, size: ‘5%’, visible: false },
ticksMajor: { interval: 10, size: ‘9%’, visible: false }
});

//setto il valore dell’ago
$(‘#gauge’).jqxGauge(‘setValue’, valore);
});
</script>

and this is the code of my page .cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace Abaconew1.Controllers
{
public class DashboardController : Controller
{
List<Gauge> gaugeList = new List<Gauge>();

//costruttore DashoboardController con inizializzazione delle varie List
public DashboardController()
{
gaugeList.Add(new Gauge(75));
}
}
// GET: /Dashboard/
public ActionResult Index()
{
return View(gaugeList);
}
//permette al alla view .aspx di prendere i dati creati e istanziati nella dashboard
public JsonResult GetGauge()
{
return Json(gaugeList, JsonRequestBehavior.AllowGet);
}

public class Gauge
{
public int Value { get; set; }
public Gauge(int value)
{
Value = value;
}
}
}

[DimitarParticipant]

Hello LeoSquall,

We suggest you initialize the gauge, then load the data through data adapter. In its loadComplete callback function call:

$(‘#gauge’).jqxGauge(‘setValue’, valore);

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts