Highcharts & JSON

**SILexRaze** · 14/05/2017, 20h33

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 :

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

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

et d'un code HTML comme ceci :

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

**sekaijin** · 14/05/2017, 20h46

Il y a une incohérence entre ton code et ton fichier de données.

Code :

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

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

Code :

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

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

**SILexRaze** · 14/05/2017, 20h56

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 :
Nom : Capture.PNG
Affichages : 892
Taille : 15,1 Ko

Nom : Capture.PNG
Affichages : 892
Taille : 15,1 Ko

Avec toujours aucun chart en vue.

Bonne soirée,
Victor

**sekaijin** · 15/05/2017, 08h12

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+

**SILexRaze** · 15/05/2017, 08h19

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

**SpaceFrog** · 15/05/2017, 08h34

Code :

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

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

n'est pas un json ...
c'est un array d'array ...

**SILexRaze** · 15/05/2017, 08h37

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 ?

**SpaceFrog** · 15/05/2017, 08h46

Code :

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

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

**SILexRaze** · 15/05/2017, 08h50

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

**SpaceFrog** · 15/05/2017, 08h53

regarde du coité de getJSON avec JQUERY qui permet de récupérer un fichier json distant

**SILexRaze** · 15/05/2017, 15h49

Oui mais s'est déjà ce que j'ai fais mais ça je fonctionne toujours pas

**SpaceFrog** · 15/05/2017, 15h56

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 ...

**SILexRaze** · 15/05/2017, 16h17

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 !

**SpaceFrog** · 15/05/2017, 16h22

Pas exactement ...

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

Code :

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

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

**SILexRaze** · 15/05/2017, 18h46

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 :

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

console.log('HelloWorld')

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

Et le data.json est :

Code :

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

200,210,302,150

**SILexRaze** · 15/05/2017, 19h00

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

Code :

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

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

**SILexRaze** · 15/05/2017, 21h46

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 :

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
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 !

Highcharts & JSON

JavaScript

Discussions similaires

Partager

Partager