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/
Et voici ce que la page affiche:
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] } ]
Est-ce que quelque chose vous saute aux yeux?
Quelle erreur ai-je fait?
Bonne soirée,
_gromit_
Partager