Discussion :

[Sebg76]

Bonjour,
Je souhaite réaliser un graphe avec highstock comme celui ci-dessous. Avec les codes ci-dessous rien ne s'affiche.
Y a t-il une personne pour m'aider à corriger ce code.
Merci.
La colonne du bas est différente de la colonne du haut.( heures pleines, heures creuses) (voir image attachée)

Comment faire pour récuperer la 3ème colonne de donnée ?
Mon fichier php qui permet d'encoder est le suivant

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$host="localhost";
$username="root"; 
$password=""; 
$db_name="ecodevices";
$table = "infoeco";
$con=mysql_connect("$host", "$username", "$password")or die("Connexion sql refusé"); 
mysql_select_db("$db_name")or die("Connexion sql refusé");
$sql = "SELECT timestp, rec_date,
   ((MAX(T1_HCHP) - MIN(T1_HCHP)) / 1000) AS hp, 
   ((MAX(T1_HCHC) - MIN(T1_HCHC)) / 1000)AS hc  
    FROM $table
    WHERE rec_date = rec_date
	GROUP BY rec_date
    ORDER BY timestp" ;
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
extract ($row);
$stp = $timestp*1000;
$data[] = array($stp, (int)$hp, (int)$hc);
}
echo json_encode($data);

Avec ce code je recupère le json dans ce format :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[[1385506802000,11,6],[1385593203000,14,10],[1385679602000,9,8],[1385766003000,13,7],[1385852402000,10,6],[1385938803000,8,9]]

Mon fichier js est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
$(function() {
    $.getJSON('../graphes/data_elec.php', function(data) {
	var date = []
      hp = []
      hc = []
      datalength = data.length;
 
        for (i = 0; i <datalength; i + +) {
            date = data [i] [0];
 
			hp.push ([
             data [i] [1],
			]);
 
			hc.push ([
             data [i] [2],
			]);      
        }
			chart = new Highcharts.StockChart({
            chart: {
                renderTo: 'container4',
                alignTicks: false
            },
 
            rangeSelector: {
                selected: 0
            },
 
            title: {
                text: 'Consommation électrique'
            },
 
            plotOptions: {
                column: {
                    stacking: 'normal'
                }
            },
            series: [{
                type: 'column',
                name: 'HP',
                data: 'hp',
                dataGrouping: {
                    units: [[
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]]
                }
            },{
                type: 'column',
                name: 'HC',
                data: 'hc',
                dataGrouping: {
                    units: [[
                        'week', // unit name
                        [1] // allowed multiples
                    ], [
                        'month',
                        [1, 2, 3, 4, 6]
                    ]]
                }
            }]
        });
    });
});

[Sunchaser]

Bonsoir,

J'aurais tendance a dire qu'il y a plusieurs choses que je ne comprends pas.
Lorsque tu écris:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data: 'hc'

, tu affectes a "data" un valeur de type chaine, et donc rien a voir avec ton tableau nommé "hc" déclaré au début de ton JS.
Ensuite, je ne comprends pas vraiment ce que tu renvoies pour le HighStock:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[[1385506802000,11,6],[1385593203000,14,10],[1385679602000,9,8],[1385766003000,13,7],[1385852402000,10,6],[1385938803000,8,9]]

.
Si je te suis bien, tu as dans chaque élément une valeur pour la date, et les 2 valeurs suivantes sont pour la série 1 et 2, correct ?
J'avoue que je n'ai jamais vu et/ou procédé de la sorte.
Normalement, pour autant que je sache, les valeurs a renvoyer vers le HighStock sont de type "[Date, Value]", ce qui donnerait pour la premìère série ('HP'):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[[1385506802000,11],[1385593203000,14],[1385679602000,9],[1385766003000,13],[1385852402000,10],[1385938803000,8]]

et pour la deuxième ('HC'):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

[[1385506802000,6],[1385593203000,10],[1385679602000,8],[1385766003000,7],[1385852402000,6],[1385938803000,9]]

Comment faire pour récuperer la 3ème colonne de donnée ?

Pour le moment, j'ai l'impression que tu ne renvoies que 2 séries de données sur 1 axe de temps....
D'ailleurs, dans ton JS, le tableau "date" ne me semble utilisé nulle part pour le chart.

@+

[npuzin]

Je ne suis pas un spécialiste avec cette library mais un truc comme ça a l'air de marcher :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
	<head>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="http://code.highcharts.com/stock/highstock.js"></script>
	</head>
	<body>		
		<div id="container">
		</div>
	</body>	
</html>
 
<script type="text/javascript">
 
	var data = [[1385506802000,11,6],[1385593203000,14,10],[1385679602000,9,8],[1385766003000,13,7],[1385852402000,10,6],[1385938803000,8,9]];	
	var heuresPleines = [];
	var heuresCreuses = [];
 
	for (var i=0;i<data.length;i++) {
		heuresPleines.push([data[i][0],data[i][1]]);
		heuresCreuses.push([data[i][0],data[i][2]]);
	}
	$('#container').highcharts({
 
			chart: {
                type: 'column'
            },
			plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
			title : {
				text : 'Consommation électrique'
			},
			xAxis: {
				type: 'datetime',
				title: {text: 'Date'}
			},
			yAxis: {
				type: 'linear',
				title: {text: 'Consommation'}
			},
			series : [{
				name : 'Heure Peines',
				data : heuresPleines
			},{
				name : 'Heure Creuses',
				data : heuresCreuses
			}]
	});
</script>

[NoSmoking]

Bonjour,
en modifiant juste $('#container').highcharts({ par $('#container').highcharts("StockChart", {dans le code de npuzin, il semblerait effectivement que le résultat attendu soit là.