Gauge highchart
Posté : 07 nov. 2013, 20:01
Bonjour,
je voudrais afficher la valeur d'une puissance toutes les 5 s avec une gauge highchart et un fichier xml. Après quelques essais une page blanche s'affiche.
Voici le fichier xml.
Voici le code html avec le js pour la gauge
Merci de votre aide.
je voudrais afficher la valeur d'une puissance toutes les 5 s avec une gauge highchart et un fichier xml. Après quelques essais une page blanche s'affiche.
Voici le fichier xml.
Code : Tout sélectionner
<response>
<T1_PPAP>2650</T1_PPAP>
<T2_PPAP>0</T2_PPAP>
<T1_PTEC>HP</T1_PTEC>
<T2_PTEC>----</T2_PTEC>
<T1_ISOUSC>45</T1_ISOUSC>
<T2_ISOUSC>0</T2_ISOUSC>
<T1_IMAX>44</T1_IMAX>
<T1_IMAX1>0</T1_IMAX1>
</response><!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Compteurs</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'gauge',
plotBackgroundColor: null,
plotBackgroundImage: null,
plotBorderWidth: 0,
plotShadow: false
},
title: {
text: 'Puissance instantanée'
},
pane: {
startAngle: -150,
endAngle: 150,
background: [{
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#FFF'],
[1, '#333']
]
},
borderWidth: 0,
outerRadius: '109%'
}, {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
stops: [
[0, '#333'],
[1, '#FFF']
]
},
borderWidth: 1,
outerRadius: '107%'
}, {
// default background
}, {
backgroundColor: '#DDD',
borderWidth: 0,
outerRadius: '105%',
innerRadius: '103%'
}]
},
// the value axis
yAxis: {
min: 0,
max: 9000,
minorTickInterval: 'auto',
minorTickWidth: 1,
minorTickLength: 10,
minorTickPosition: 'inside',
minorTickColor: '#666',
tickPixelInterval: 30,
tickWidth: 2,
tickPosition: 'inside',
tickLength: 10,
tickColor: '#666',
labels: {
step: 2,
rotation: 'auto'
},
title: {
text: 'Watt'
},
plotBands: [{
from: 0,
to: 1200,
color: '#55BF3B' // green
}, {
from: 1200,
to: 5500,
color: '#DDDF0D' // yellow
}, {
from: 5500,
to: 9000,
color: '#DF5353' // red
}]
},
series: []
},
$.get('http://xxx.xxx.xxx.xxx/status.xml', function(xml) {
// Split the lines
var $xml = $(xml);
console.log(xml);
// push categories
$xml.find('T1_PPAP').each(function(i, data) {
var seriesOptions = {
data: []
};
seriesOptions.data.push(
parseInt($(data).text())
);
options.series.push(seriesOptions),
});
var chart = new Highcharts.Chart(options);
});
});
</script>
</head>
<body>
<script src="http://xxx.xxx.xxx.xxx/graphes/js/highcharts.js"></script>
<script src="http://xxx.xxx.xxx.xxx/graphes/js/highcharts-more.js"></script>
<script src="http://xxx.xxx.xxx.xxx/graphes/js/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>
</body>
</html>
Merci de votre aide.