Mise en oeuvre d'une gauge

estelle · Message par **estelle** » 01 nov. 2017, 10:55

Bonjour à tous,

J'essaie de mettre en oeuvre une gauge angulaire avec cette exemple:

http://jsfiddle.net/gh/get/library/pure ... eedometer/

Il n'y a rien à l'affichage

Qui peut me transmettre un exemple simple d'une gauge angulaire animée par une variable
Merci d'avance

Estelle

Message par **Météo Villarzel** » 01 nov. 2017, 11:15

Salut Estelle

étant donné que j'utilise la dernière valeur de certaine sondes en plusieurs endroit, j'ai déjà fait un fichier pour récupérer cette valeur (la température dans l'exemple)

Code : Tout sélectionner

<?php
// Récupération de la dernière donnée 
date_default_timezone_set("UTC");
require("mysql_connect.php");
 $result=mysql_query ("SELECT outdoortemperature FROM data ORDER BY tstamp DESC LIMIT 0, 1") or die (mysql_error ());
 $data = array();
$count = 0;
while ($row=mysql_fetch_array($result))
{
   
  $data[] = array(  (float)$row['outdoortemperature']);
  $count++;
}   
echo json_encode($data);
?>

ce qui donne
http://www.boock.ch/meteo/graphiques_ph ... temp_1.php

ensuite pour le graphique,
http://www.boock.ch/meteo/graphiques_ph ... s_temp.php

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="content-type" content="text/plain; charset=ISO-8859-1"> 
<HEAD>
<script type="text/javascript" src="jquery.min.js"></script> 
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>



<script type="text/javascript">

$(function () {
[color=#FF0000]$.getJSON('../data_temp_1.php', function(data)[/color] {

	
    $('#container').highcharts({
	
	    chart: {
	        type: 'gauge',
	        plotBackgroundColor: null,
	        //plotBackgroundImage: '',
	        plotBorderWidth: 0,
	        plotShadow: false
	    },
	    
	    title: {
	        text: 'Température extérieure'
	    },
		credits: {
            text: 'Météo Villarzel',
            href: '',
			position: {
	align: 'center',
	x: 0,
	verticalAlign: 'bottom',
	y: -35
}
			},
	    
	    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: {
	                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
	                stops: [
	                    [0, '#4aabe4'],
	                    [1, '#c3e1f6']
	                ]
	            },
	            borderWidth: 0,
	            outerRadius: '105%',
	            innerRadius: '0%'
	        }]
	    },
	       
	    // the value axis
	    yAxis: {
	        min: -20,
	        max: 40,
	        
	        minorTickInterval: 'auto',
	        minorTickWidth: 1,
	        minorTickLength: 10,
	        minorTickPosition: 'inside',
	        minorTickColor: '#666',
	
	        tickPixelInterval: 50,
	        tickWidth: 2,
	        tickPosition: 'inside',
	        tickLength: 10,
	        tickColor: '#666',
	        labels: {
	            step: 1,
	            rotation: 'auto'
	        },
	        title: {
	            text: '°C'
	        },
	        plotBands: [{
	            from: -20,
	            to: -10,
	            color: '#7adeec'
	        }, {
	            from: -10,
	            to: 0,
	            color: '#7adeec'
	        }, {
	            from: 0,
	            to: 10,
	            color: '#1f9bdc'
	        }, {
	            from: 10,
	            to: 20,
	            color: '#1f9bdc'
	        }, {
	            from: 20,
	            to: 30,
	            color: '#ea8870'
	        }, {
	            from: 30,
	            to: 40,
	            color: '#ea8870'
	        }]        
	    },
		plotOptions: {
			gauge: {
				dial: {
				// dial=aiguille
					radius: '80%',
					backgroundColor: 'black',
					borderColor: 'black',
					borderWidth: 1,
					baseWidth: 3,
					topWidth: 0,
					baseLength: '70%', // of radius
					rearLength: '20%'
				},pivot: {
				// centre aiguille
					radius: 10,
					borderWidth: 1,
					borderColor: 'gray',
					backgroundColor: {
						linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
						stops: [
							[0, 'white'],
							[1, 'gray']
						]
					}	
				},dataLabels: {
                    enabled: true,
                    borderRadius: 5,
                    format: '{y} °C',
                    // backgroundColor: 'rgba(252, 255, 197, 0.7)',
                    borderWidth: 1,
                    borderColor: '#AAA',
                    y: 65
                }
			}
		},
	    series: [{
	        name: 'Température',
	        data: data,
			tooltip: {
	            valueSuffix: ' °C'
	        }
	    }]
	
	
	});
});
});
</script> 
    </head>
<body>
<div id="container" style="width: 270px; height: 300px; margin: 0 auto"></div>	
</body>
</html>

il faut évidement indiquer le chemin vers ton fichier
$.getJSON('../data_temp_1.php', function(data)

data_temp_1.php étant le fichier créé en premier pour récupérer la dernière valeur dans la base de données

Bonne journée

A+

Pierre-André

estelle · Message par **estelle** » 01 nov. 2017, 13:49

Météo Villarzel a écrit :Salut Estelle
Pierre-André

J'ai un peu progressé !! C'est l'exemple que j'ai téléchargé !
J'arrive à afficher la gauge mais l'aiguille n'est pas visible mais la valeur change

Code : Tout sélectionner

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Highcharts Example</title>

		<style type="text/css">

		</style>
	</head>
	<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; max-width: 400px; height: 300px; margin: 0 auto"></div>



		<script type="text/javascript">


Highcharts.chart('container', {

    chart: {
        type: 'gauge',
        plotBackgroundColor: null,
        plotBackgroundImage: null,
        plotBorderWidth: 0,
        plotShadow: false
    },

    title: {
        text: 'Speedometer'
    },

    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: 200,

        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: 'km/h'
        },
        plotBands: [{
            from: 0,
            to: 120,
            color: '#55BF3B' // green
        }, {
            from: 120,
            to: 160,
            color: '#DDDF0D' // yellow
        }, {
            from: 160,
            to: 200,
            color: '#DF5353' // red
        }]
    },

    series: [{
        name: 'Speed',
        data: [80],
        tooltip: {
            valueSuffix: ' km/h'
        }
    }]

},
// Add some life
function (chart) {
    if (!chart.renderer.forExport) {
        setInterval(function () {
            var point = chart.series[0].points[0],
                newVal,
                inc = Math.round((Math.random() - 0.5) * 20);

            newVal = point.y + inc;
            if (newVal < 0 || newVal > 200) {
                newVal = point.y - inc;
            }

            point.update(newVal);

        }, 3000);
    }
});
		</script>
	</body>
</html>

J'ai chargé les fichiers et répertoires sous le répertoire JS du serveur
A+
Estelle

estelle · Message par **estelle** » 01 nov. 2017, 13:53

Concernant les données pas de pb, elles sont issues de mes BDD en MySql
J'utilise déjà Highcharts mais les gauges me posent problème d'affichage

http://ruches.montminoises.free.fr/index.php
Merci pour ton aide

PS: ton site est magnifique

estelle · Message par **estelle** » 01 nov. 2017, 14:13

J'ai chargé toute les biblio avec les mêmes chemins et depuis cela fonctionne

Message par **Météo Villarzel** » 01 nov. 2017, 14:25

Nickel.

Sympa ton projet de ruche connectée.

A+

estelle · Message par **estelle** » 01 nov. 2017, 16:06

Je n'arrive pas à supprimer le cadre blanc autour de la jauge
J'ai essayé
plotBorderColor : avec la couleur du fond de ma page

Peut on forcer la transparence du fond (pas l'intérieur du cadran et de la bordure ?

Sur ton site la tour de la jauge est couleur aluminium
Je souhaiterai une couleur cuivre
A+
Estelle

Message par **Météo Villarzel** » 01 nov. 2017, 17:56

Estelle,
je pense que tu confonds les jauges highcharts
https://www.highcharts.com/demo/gauge-speedometer
ou les options sont limitée au niveau du design, mais tu peux quand même modifier les couleurs de la panne (contour)
et la couleur de fonds
plotBackgroundColor: null,

tu peux faire tes tests ici
http://jsfiddle.net/gh/get/library/pure ... eedometer/
tu modifies le code dans la fenêtre de gauche (code JS) et tu fais Run en haut à gauche pour voir le résultat

Ne pas confondre avec les jauges SteelSeries qui sont écrite en html5
http://www.boock.ch/meteo/gauges_stelserie.php
Demo de configuration
http://www.boock.ch/meteo/gauges_stelse ... radial.php
Tutoriel
http://www.boock.ch/meteo/tuto_steelser ... ies_01.php

A+

Message par **jturlier** » 01 nov. 2017, 18:32

Bonjour,
je ne crois pas que l'utilisation de highchart/highstock, soit la meilleure solution en ce qui concerne les jauges circulaires. En effet, c'est plutôt orienté graphes et charts.
Il me semblerait plus simple et avec beaucoup plus de possibilités d'utiliser les jauges radial "steel series" qui sont beaucoup plus faciles à mettre en oeuvre !

Message par **Météo Villarzel** » 01 nov. 2017, 20:33

pour la couleur de fond il faut rajouter cette instruction

chart: {
type: 'gauge',
plotBackgroundColor: null,
backgroundColor: '',

tu peux indiquer la couleur que tu veux entre ' '

pour la couleur des autre éléments il faut consulter les API
https://api.highcharts.com/highcharts/

Mise en oeuvre d'une gauge

Mise en oeuvre d'une gauge

Re: Mise en oeuvre d'une gauge

Re: Mise en oeuvre d'une gauge

Re: Mise en oeuvre d'une gauge

Re: Mise en oeuvre d'une gauge

Re: Mise en oeuvre d'une gauge

Re: Mise en oeuvre d'une gauge

Re: Mise en oeuvre d'une gauge

Re: Mise en oeuvre d'une gauge

Re: Mise en oeuvre d'une gauge