Highstock avec plusieurs séries json

Version imprimable

1 pièce(s) jointe(s)

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:

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:

[[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:

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]
                    ]]
                }
            }]
        });
    });
});

06/12/2013, 03h02
Sunchaser

Bonsoir,

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

Code:

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:

[[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:

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

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

Code:

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

Citation:

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.

@+
;)

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

Code:

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>

06/12/2013, 22h48
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à.