Graphique - affichage valeur en haut des colonnes

dsigmoun · Août 16, 2020, 6:57

Bonjour,

Sur un graphique en colonne, existe t’il une astuce afin d’afficher la valeur en haut des colonnes ?

Merci.

dsigmoun · Août 17, 2020, 5:22

Finalement, je vais essayer de m’orienter vers des graphiques highcharts. Le point de départ sera ce format.

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Highcharts Example</title>

		<style type="text/css">
@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
	max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}


/* Link the series colors to axis colors */
.highcharts-color-0 {
	fill: #7cb5ec;
	stroke: #7cb5ec;
}
.highcharts-axis.highcharts-color-0 .highcharts-axis-line {
	stroke: #7cb5ec;
}
.highcharts-axis.highcharts-color-0 text {
	fill: #7cb5ec;
}
.highcharts-color-1 {
	fill: #90ed7d;
	stroke: #90ed7d;
}
.highcharts-axis.highcharts-color-1 .highcharts-axis-line {
	stroke: #90ed7d;
}
.highcharts-axis.highcharts-color-1 text {
	fill: #90ed7d;
}


.highcharts-yaxis .highcharts-axis-line {
	stroke-width: 2px;
}

		</style>
	</head>
	<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<script src="../../code/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        Charts can be styled using CSS, allowing designers and
        developers to more easily collaborate on chart configuration.
        This example shows how the base Highcharts styling is imported
        using CSS, and modified without the need for Javascript.
    </p>
</figure>



		<script type="text/javascript">
Highcharts.chart('container', {

    chart: {
        type: 'column',
        styledMode: true
    },

    title: {
        text: 'Styling axes and columns'
    },

    yAxis: [{
        className: 'highcharts-color-0',
        title: {
            text: 'Primary axis'
        }
    }, {
        className: 'highcharts-color-1',
        opposite: true,
        title: {
            text: 'Secondary axis'
        }
    }],

    plotOptions: {
        column: {
            borderRadius: 5
        }
    },

    series: [{
        data: [1, 3, 2, 4]
    }, {
        data: [324, 124, 547, 221],
        yAxis: 1
    }]

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

L’objectif sera :

que la colonne soit d’une couleur différent au delà d’une certaine valeur
que la valeur apparaissent en haut de la colonne.

Je rencontre un premier point de blocage : comment charge t’on les séries de l’historique de jeedom ? J’ai ceci dans l’exemple

  series: [{
        data: [1, 3, 2, 4]
    }, {
        data: [324, 124, 547, 221],
        yAxis: 1
    }]

dsigmoun · Août 23, 2020, 1:12

je n’ai toujours pas trouvé comment récupérer les données et ce que j’ai trouvé sur le forum ne m’a pas fait avancer. Je pars de loin ^^.

J’ai essayé avec un graphique simple et le chargement d’une donnée d’un équipement avec la commande jeedom.cmd.execute({ id: ‹ 3428 › , mais rien…

Après il me faudra récupérer les données de l’historique de cette commande sur les 7 derniers jours…

.


<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Highcharts Example</title>

		<style type="text/css">
@import 'https://code.highcharts.com/css/highcharts.css';

		</style>
	</head>
	<body>
<script src="../../code/highcharts.js"></script>
<script src="../../code/modules/exporting.js"></script>
<script src="../../code/modules/export-data.js"></script>
<script src="../../code/modules/accessibility.js"></script>


<div id="Graphique_1" style="min-width: 150px; height: 410px;"></div>
<script>

    
    var valeur1;
    jeedom.cmd.execute({ id: '3428',
          success:  function(resultat) {   
            valeur1 = parseFloat(resultat);
        }
  });
    
  setTimeout(graph, 10); 
  function graph(){
    
    Highcharts.chart('Graphique_1', {
    chart: {

        type: 'column'
    },
    title: {
        text: ''
    },
  plotOptions: {
        column: {
            borderRadius: 5
        }
    },
    series: [{

        data: [{
            name: 'valeur1',
            color: '#ccd41f'

        }]
    }]
});
}
  </script>
	</body>
</html>

dsigmoun · Août 23, 2020, 6:57

J’ai avancé un peu. j’arrive à charger des données mais je passe avant par un virtuel pour les récupérer… il y a surement mieux en tapant dans la base de donnée.

J’essaie d’afficher une image, mais je bloque
Si je met le lien en dur, l’image se charge.

          return '<div style="text-align:center"><div>' + this.y + '</div><div class="dynamic-class-' + this.series.name.toLowerCase() +'"><img src="/html/data/img/14.png"></div></div>';

Mais si je veux adapter l’image en fonction de la valeur, cela plante le tableau et rien ne se charge.

          return '<div style="text-align:center"><div>' + this.y + '</div><div class="dynamic-class-' + this.series.name.toLowerCase() +'"><img src="/html/data/img/' + math.round(this.y) + '.png"></div></div>';

Voyez-vous pourquoi ?

Le code complet :

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Highcharts Example</title>

		<style type="text/css">
@import 'https://code.highcharts.com/css/highcharts.css';

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
	max-width: 800px;
    margin: 1em auto;
}

.highcharts-data-table table {
	font-family:Montserrat, Arial;
    font-variant: small-caps;
    font-weight:normal;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}


/* Link the series colors to axis colors */
.highcharts-color-0 {
	fill: #7cb5ec;
	stroke: #7cb5ec;
}
.highcharts-axis.highcharts-color-0 .highcharts-axis-line {
	stroke: #7cb5ec;
}
.highcharts-axis.highcharts-color-0 text {
	fill: #7cb5ec;
}
.highcharts-color-1 {
	fill: #90ed7d;
	stroke: #90ed7d;
}
.highcharts-axis.highcharts-color-1 .highcharts-axis-line {
	stroke: #90ed7d;
}
.highcharts-axis.highcharts-color-1 text {
	fill: #90ed7d;
}


.highcharts-yaxis .highcharts-axis-line {
	stroke-width: 2px;
}

		</style>
	</head>
	<body>


<figure class="highcharts-figure">
    <div id="container"></div>
</figure>



		<script type="text/javascript">
          
    var valeur1;
    jeedom.cmd.execute({ id: '3577',
          success:  function(resultat) {   
            valeur1 = parseFloat(resultat);
  }});
    var valeur2;
    jeedom.cmd.execute({ id: '3578',
          success:  function(resultat) {   
            valeur2 = parseFloat(resultat);
  }});
    var valeur3;
    jeedom.cmd.execute({ id: '3579',
          success:  function(resultat) {   
            valeur3 = parseFloat(resultat);
  }});                        
     var valeur4;
    jeedom.cmd.execute({ id: '3580',
          success:  function(resultat) {   
            valeur4 = parseFloat(resultat);
  }});                     
    var valeur5;
    jeedom.cmd.execute({ id: '3581',
          success:  function(resultat) {   
            valeur5 = parseFloat(resultat);
  }});
    var valeur6;
    jeedom.cmd.execute({ id: '3582',
          success:  function(resultat) {   
            valeur6 = parseFloat(resultat);
  }});                        
     var valeur7;
    jeedom.cmd.execute({ id: '3583',
          success:  function(resultat) {   
            valeur7 = parseFloat(resultat);
  }});                                            
 
var consommation_jour = valeur1 + "," + valeur2 + "," + valeur3 + ","+ valeur4 + ","+ valeur5 + "," + valeur6 + "," + valeur7


          
Highcharts.chart('container', {

    chart: {
        type: 'column',
        styledMode: true
    },

    title: {
        text: ''
    },

    yAxis: [{
        className: 'highcharts-color-0',
        title: {
            text: ''
        }
    }],


  xAxis: {
            categories: ['J-7', 'J-6', 'J-5', 'J-4', 'J-3', 'J-2', 'J-l']
        },
  
plotOptions: {
  column: {
    dataLabels: {
      enabled: true,
      useHTML: true,
      formatter: function() {
          return '<div style="text-align:center"><div>' + this.y + '</div><div class="dynamic-class-' + this.series.name.toLowerCase() +'"><img src="/html/data/img/' + math.round(this.y) + '.png"></div></div>'; 

    
      },
      y: 0
    }
  }
},

    series: [{
        data: JSON.parse("[" + consommation_jour + "]")
    }]

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