Highcharts & JSON

Version imprimable

Highcharts & JSON

Bonjour à tous !

Je prépare un projet pour la classe de terminale SSI et je suis devant un problème. Je m'explique, je doit afficher à l'aide de Highcharts un graphique présentant la hauteur d'eau (avec un historique). Je dispose d'un Fichier JSON comme ceci :

Code:

[[200],[250],[150]]

et d'un code HTML comme ceci :

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<html>
 
<head>
    <title>Premier test de Highcharts </title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <link rel="stylesheet" href="style.css" />
<script src="./js/highstock.js"></script>
<script src="./js/modules/exporting.js"></script>
</head>
 
<body>
 
<?php
$date = date("d-m-Y");
$heure = date("H:i");
Print("Nous sommes le $date et il est $heure");
?>
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<pre class="brush:jscript;">
<script type="text/javascript">
$(function() {
 
    $.getJSON('data.json', function(data) {
        var H1 = [];
        for (var i=0;i<data.length;i++) {
        H1.push([data[i][0],data[i][1]]);
        }
 
        // Create a timer
        var start = + new Date();
 
        // Create the chart
        $('#container').highcharts('StockChart',{
            chart : {
 
        // Affichage temps chargement
        events: {
            load: function(chart) {
                this.setTitle(null, {
                    text: 'Graphique généré en : '+ (new Date() - start) +'ms'
                        });
                    }
            },
        zoomType: 'x'
 
        //renderTo : 'container'
 
            },
 
            rangeSelector : {
            inputEnabled: $('#container').width() > 144,
                buttons: [{
                    type: 'day',
                    count: 1,
                    text: '1j'
                }, {
                    type: 'day',
                    count: 2,
                    text: '2j'
            }, {
                    type: 'day',
                    count: 3,
                    text: '3j'
            }, {
                    type: 'week',
                    count: 1,
                    text: '1s'
                }, {
                    type: 'month',
                    count: 1,
                    text: '1m'
                }, {
                    type: 'month',
                    count: 6,
                    text: '6m'
                }, {
                    type: 'year',
                    count: 1,
                    text: '1a'
                }, {
                    type: 'all',
                    text: 'tout'
                }],
                selected: 1
                },
 
        yAxis: {
            title: {
                text: 'Hauteur d\'eau'
                }
                //min: -20,
                //max: 40
                //startOnTick: false,
                    //endOnTick: false
        },
 
            title : {
                text : 'Mesures de hauteur d\'eau'
                },
 
        legend: {
            enabled: true,
            align: 'center',
            layout: 'horizontal',
            verticalAlign: 'bottom',
        },
 
 
            series :    [{
                name : 'Hauteur d\'eau',
                data : H1,
        color: '#008000',
                type: 'spline',
 
        tooltip:    {
                    valueDecimals: 2,
            valueSuffix: 'm'
                            }
                        }
 
            ]
        });
    });
 
});
</script>
<div id="container" style="height: 700px; min-width: 500px"></div>
 
</body>
</html>

Cependant rien ne s'affiche et ça fais déjà pas mal de temps que je bloque là dessus et j'aimerais donc avancer ! De plus j'aimerais bien afficher en xAxis la date à laquelle la hauteur d'eau est récupérée du tableau mais je n'ai absolument aucune idée de comment réaliser ceci. J'approche de la deadline du projet...

Merci d'avance pour votre aide.
Bon dimanche !

Victor

14/05/2017, 20h46
sekaijin
Il y a une incohérence entre ton code et ton fichier de données.
Code:

1 2 3 for (var i=0;i<data.length;i++) { H1.push([data[i][0],data[i][1]]); }
Code:

[[200],[250],[150]]

si tu déroule ton code data = [[200],[250],[150]]
tu boucle sur les éléments tu tableau (le premier [) de tes datas
data[0]= [200]
data[1] = [250]
data[2] = [150]

on voit donc bien que dans tous les cas data[i] est un tableau mais celui-ci ne contient qu'un seul élément
data[0][0]= 200
data[1][0] = 250
data[2][0] = 150
il n'a donc pas de deuxième élément
data[0][1]= undefined
data[1][1] = undefined
data[2][1] = undefined

le plus simple tu ajoute après la boucle
console.log(H1);
et tu ouvres la console de ton navigateur (en général il faut taper F12) tu verras alors la valeur de H1

A+JYT
14/05/2017, 20h56
SILexRaze

1 pièce(s) jointe(s)

Salut,

merci pour cette réponse rapide !
Tu as entièrement raison c'est une erreur de ma part en ayant repris le code d'un ancien projet. Cependant, même l'erreur corrigée (en ayant ajouté console.log(H1) comme indiqué, j'obtient ceci :
Pièce jointe 275390
Avec toujours aucun chart en vue.

Bonne soirée,
Victor
15/05/2017, 08h12
sekaijin

Tu ne peux pas ouvrir ton appli directement en file: il te faut mettre le tout sur un serveur http.

Le chargement des data doit être sur le même serveur. C'est une question de sécurité. Le navigateur ne chargera pas les data en file: car cela présente un fort risque de contamination.

A+
15/05/2017, 08h19
SILexRaze

Ok d'accord je comprend oui !
Mais du coup pour revenir au Highcharts il faudrait que j'arrive à y intégrer les dates et ces mêmes valeurs mais je ne comprend pas pourquoi Highcharts ne prend pas en compte les valeurs H1
15/05/2017, 08h34
SpaceFrog

Code:

[[200],[250],[150]]

n'est pas un json ...
c'est un array d'array ...
15/05/2017, 08h37
SILexRaze

Ah d'accord je pensais,
Mais du coup est ce que ça serais possible de faire quelque chose comme ça
255, 250, 180, 190
Et que d'extraire les nombre pour les placer dans un tableau ?

Code:

1
2
3
4
vat tabtab=[[200],[250],[150]]
alert(tabtab[0][0]);
alert(tabtab[1][0]);
alert(tabtab[2][0]);

15/05/2017, 08h50
SILexRaze

Ouais d'accord cependant c'est une raspberry qui place les valeur dans un tableau (ce sont ses hauteurs d'eau) donc il faut que ça soit sur un fichier indépendant et de plus je doit conserver chaque valeur pour créer ensuite un historique avec highcharts
15/05/2017, 08h53
SpaceFrog

regarde du coité de getJSON avec JQUERY qui permet de récupérer un fichier json distant
15/05/2017, 15h49
SILexRaze

Oui mais s'est déjà ce que j'ai fais mais ça je fonctionne toujours pas
15/05/2017, 15h56
SpaceFrog

un getJson récupère le contenu d'eun fochoer json distant et le convertit au format json pour js ...

As tu loggué le json lors de sa réception ?

Ensuite c'est juste uen question de syntaxe poru attaquer le json reçu ...
15/05/2017, 16h17
SILexRaze

Ok donc théoriquement je charge le fichier et je le met en json js et ensuite je le traite pour le mettre dans un array et le faire bouffer à Highcharts c'est ça ?
Je le fais quand je rentre du boulot !
15/05/2017, 16h22
SpaceFrog
Pas exactement ...

le getJSON convertit déjà le retour en json ...
data est un json sur le retour de getJSON
Code:

1 2 3 4 $.getJSON('data.json', function(data) { console.log( data ) }
te permettra de voir le json en retour

data[0][0] => 200
data[1][0] => 250
data[2][0] => 150
15/05/2017, 18h46
SILexRaze

Ok je viens d'upload ton code sur le serveur (en ajoutant une parenthèse à la fin si je ne me trompe pas) mais cela ne m'affiche rien, de meme quand je place un :

Code:

console.log('HelloWorld')

dans la fonction $.getJSON cela ne m'affiche rien.

Et le data.json est :

Code:

200,210,302,150
15/05/2017, 19h00
SILexRaze

Autant pour moi, il fallait donc bien avoir un data.json de ce type là:

Code:

[[205],[300]]

Cette partie fonctionne donc maintenant !
Et donc maintenant je suppose que je fais une boucle for pour mettre les nombres dans un array et les lire avec HighCharts ?

J'ai avancé j'obtient maintenant un graphique, mais celui ci est vide, c'est à dire que les axes et tout le reste sont présent. De plus quand je pointe avec la souris je vois le popup indiquant la valeurs, mais la courbe est invisible et je ne trouve rien du coté du site de l'API.

Voilà le code:

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Premier test de Highcharts </title>
	<link rel="stylesheet" href="style.css" />
	<script src="./js/jquery.min.js"></script>
	<script src="./js/highstock.js"></script>
	<script src="./js/modules/exporting.js"></script>
</head>
 
<body>
Nous sommes le 15-05-2017 et il est 21:43<meta http-equiv="Content-Type" content="text/html"; charset="utf-8">
<pre class="brush:jscript;">
<script type="text/javascript">
	$(function() {
	$.getJSON('data.json', function(data) {
		var H=[];
		var today=new Date();
		for(var i=0;i<data.length;i++){
			H.push([[data[i][0]]]);
		}
	var start = + new Date();
	$('#container').highcharts('StockChart', {
		chart : {
			type: 'line',
			events: {
				load: function(chart) {
					this.setTitle(null, {
						text: 'Graphique genere en : '+ (new Date() - start) + 'ms'
					});
				}
			},
		},
		rangeSelector : {
			inputEnabled: $('#container').width() > 144,
			buttons: [{
				type: 'day',
				count: 1,
				text: '1j'
			}, {
				type: 'day',
				count: 2,
				text: '2j'
			}, {
				type: 'day',
				count: 3,
				text: '3j'
			}, {
				type: 'week',
				count: 1,
				text: '1s'
			}, {
				type: 'month',
				count: 1,
				text: '1m'
			}, {
				type: 'month',
				count: 6,
				text: '6m'
			}, {
				type: 'year',
				count: 1,
				text: '1a'
			}, {
				type: 'all',
				text: 'tout'
			},],
			selected: 1
			},
 
		yAxis: {
			title: {
				text: 'Hauteur d\'eau'
			}
		},
 
		legend: {
			enabled: true,
			align: 'center',
			layout: 'horizontal',
			verticalAlign: 'bottom'
		},
 
		series: [{
			name: 'Hauteur d\'eau',
			data : H,
			type: 'line',
			color: '#2AFFD4',
			tooltip: {
				valueDecimals: 1,
				valueSuffix: 'm'
			}
		}]
	});
 
});
	});
</script>
<div id="container" style="height: 700px; min-width: 500px"></div>
</body>
</html>

Bonne soirée !