Gauge highchart

par **Sebg76** » 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.

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>

Voici le code html avec le js pour la gauge

<!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>

Ayant peu de connaissance en js j'essai de trouver la solution par comparaison de code.
Merci de votre aide.

Gauge highchart

Répondre

Étendre la vue Revue du sujet : Gauge highchart

Gauge highchart