Comment puis-je tracer jauge Highcharate avec des données JSON?
Je travaille sur HighcharLe Gauge, j'ai eu des succès dans la présentation des dernières données de la base de données. J'ai utilisé le code est .. p> Le code de JSON est p> javascripterialiszer code> pour ce p> public string chartData1
{
get;
set;
}
protected void Page_Load(object sender, EventArgs e)
{
List<double> _data = new List<double>();
GetData();
foreach (DataRow row in dt.Rows)
{
_data.Add((double)Convert.ToDouble(row["S11"]));
}
JavaScriptSerializer jss = new JavaScriptSerializer();
chartData1 = jss.Serialize(_data);
}
3 Réponses :
Pour que le tableau soit mis à jour, le navigateur doit en quelque sorte demander les dernières données du serveur. Il y a deux façons de faire cela:
Je présume que vous souhaitez mettre à jour le graphique sans recharger la page entière. Pour ce faire, vous devez découvrir des demandes Ajax à l'aide de JQuery.
Le site Highcharts a quelques ressources qui vous aideront (par exemple, http://www.highchatts.com/docs/working-with-Data/preprocessing-live-Data ). Vous devez apprendre à faire un appel AJAX en JavaScript et utilisez les données renvoyées pour mettre à jour votre graphique. Vous devrez également écrire la partie côté serveur qui retourne les données AJAX. L'exemple donné est dans PHP, mais il devrait être assez simple de faire quelque chose de similaire dans ASP.NET.
Essayez de placer cette partie du code
setInterval(function() {
$(function() {
$.getJSON('S12.aspx', function(data) {
$.each(data, function(val) {
if (val !== null)
{
var point = chart.series[0].points[0];
point.update(val);
}
});
});
})
},2000)
NOP sa ne fonctionne pas, la jauge n'affiche que la valeur 0.
Est-il possible de reproduire votre problème comme une démonstration en direct?
Eh bien, la page s12.aspx est dans le réseau intranet non sur Internet.
Droite, c'est possible ce qui est retourné par S12.aspx? comme Json ou des autres autres?
Les données semblent être correctes ( JSFIDDLE.net/H6J2P ) mais je conseille à ouvrir la console (outils de développement) et Coller Console.log (Data), dans Getjson (), vous saurez alors si JSON est obtenu correctement.
Pouvez-vous me guider à n'importe quel exemple? Je ne suis pas très conscient de JavaScript. J'utilise visuel studio 2012
Je veux dire Exemple de course, sur le navigateur et utiliser les outils de développeurs (F12), activer la console et voir quelle console.log revient.
Il donne une sortie journal: 0 journal: 1 continuellement. J'ai une variable Val
S'il vous plaît voir la modification du nouveau code. Ici, j'ai vérifié que le Json que je reçois ne change pas du tout. Je reçois une réponse continue comme journal: 1387212362728.6291,771 Les données de JSON ne changent pas du tout
Je pense qu'il y a un bug ou quelque chose dans le Visual Studio 2012 code>. Je viens de coller tout le code sur la nouvelle page code> aspx code>. Je n'ai rien fait d'autre que je viens de coller le code sur une autre page. <script type="text/javascript">
$(function () {
$('#container1').highcharts({
chart: {
type: 'gauge',
alignTicks: false,
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Pressure Meter'
},
pane: {
startAngle: -150,
endAngle: 150
},
yAxis: [{
min: 0,
max: 1000,
lineColor: '#339',
tickColor: '#339',
minorTickColor: '#339',
offset: -25,
lineWidth: 2,
labels: {
distance: -20,
rotation: 'auto'
},
tickLength: 5,
minorTickLength: 5,
endOnTick: false
}, {
min: 0,
max: 1000,
tickPosition: 'outside',
lineColor: '#933',
lineWidth: 2,
minorTickPosition: 'outside',
tickColor: '#933',
minorTickColor: '#933',
tickLength: 5,
minorTickLength: 5,
labels: {
distance: 12,
rotation: 'auto'
},
offset: -20,
endOnTick: false
}],
series: [{
name: 'Pressure',
data: [80],
dataLabels: {
formatter: function () {
var psi = this.y,
bar = Math.round(psi / 14.50);
return '<span style="color:#339">' + psi + ' psi</span><br/>' +
'<span style="color:#933">' + bar + ' bar</span>';
},
backgroundColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, '#DDD'],
[1, '#FFF']
]
}
},
tooltip: {
valueSuffix: ' psi'
}
}]
},
// Add some life
function (chart) {
setInterval(function () {
$.getJSON("S12.aspx", function (data, textStatus) {
$.each(data, function (index, wind) {
var point = chart.series[0].points[0],
newVal = wind;
point.update(newVal);
});
});
}, 3000);
});
});
</script>