[Chart.js] Chargement de données json

1 pièce(s) jointe(s)

Chargement de données json

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:

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:

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:
Pièce jointe 393614

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

Bonne soirée,
_gromit_

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

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