Chargement de données json

**_gromit_** · 03/07/2018, 21h32

Bonjour,

dans le cadre d'un petit montage électronique sur esp8266, je souhaite afficher un graphique à partir de mesures renvoyées en json.
J'ai essayé tous les exemples que j'ai trouvé sur internet, mais je n'arrive pas à obtenir un courbe.
Le graphique fonctionne bien lorsque les données sont placées en dur dans la page html, mais dès que je souhaite les charger depuis le json ça n'affiche plus rien.

Voici le code de ma page html:

Code html :

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toto</title>
</head>
<body>
<div style="width: 100%; height: 100%;">
    <canvas id="myChart" style="width: 100%; height: 100%;"></canvas>
</div>
<div id="js-legend" class="chart-legend"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<canvas id="myChart" width="740" height="1000"></canvas>
 
<script>
$.getJSON("hData", function (json) {
  window.chartColors = {
          red: 'rgb(255, 99, 132)',
          orange: 'rgb(255, 159, 64)',
          yellow: 'rgb(255, 205, 86)',
          green: 'rgb(75, 192, 192)',
          blue: 'rgb(54, 162, 235)',
          purple: 'rgb(153, 102, 255)',
          grey: 'rgb(201, 203, 207)'
  };
 
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels: json.map(function(e) { return e.time; }),
      datasets: [
        {
          label: 'temperature',
          data: json.map(function(e) { return e.temperature; }),
          backgroundColor: window.chartColors.red,
          borderColor: window.chartColors.red,
          fill: false,
          borderWidth: 1
        },
        {
          label: 'humidity',
          data: json.map(function(e) { return e.humidity; }),
          backgroundColor: window.chartColors.blue,
          borderColor: window.chartColors.blue,
          fill: false,
          borderWidth: 1
      }]
    }
  });
});
</script>
</body>
</html>

Voici ce que renvoie la requête /hData/

Code :

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

1
2
3
4
5
6
7
[
 {
  "time":["21:29:20","21:29:21","21:29:22","21:29:23","21:29:24","21:29:25","21:29:26","21:29:27","21:29:28","21:29:29","21:29:30","21:29:31","21:29:32","21:29:33","21:29:34","21:29:35","21:29:36","21:29:37","21:29:38","21:29:39","21:29:40","21:29:41","21:29:42","21:29:43","21:29:44","21:29:45","21:29:46","21:29:47","21:29:48","21:29:49","21:29:50","21:29:51","21:29:52","21:29:53","21:29:54","21:29:55","21:29:56","21:29:57","21:29:58","21:29:59","21:30:00","21:30:01","21:30:02","21:30:03","21:30:04","21:30:05","21:30:06","21:30:07","21:30:08","21:30:09","21:30:10","21:30:11","21:30:12","21:30:13","21:30:14","21:30:15","21:30:16","21:30:17","21:30:18"],
  "temperature":[29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0,29.0],
  "humidity":[37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37,37]
 }
]

Et voici ce que la page affiche:
Nom : Capture d’écran 2018-07-03 à 21.30.54.png
Affichages : 1021
Taille : 15,9 Ko

Est-ce que quelque chose vous saute aux yeux?
Quelle erreur ai-je fait?

Bonne soirée,
_gromit_

**psychadelic** · 03/07/2018, 22h23

peut- être parce que hData est un tableau => labels: json.map(function(e) { return e[0].time; }), ?

**_gromit_** · 03/07/2018, 22h39

Oui, bien vu!
J'ai retiré les crochets de hData pour qu'il ne soit plus un tableau et j'accède aux données directement sans la méthode map.
Et ça marche nickel!

merci psychadelic

Chargement de données json [Chart.js]

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager