Visualiser des données Google Sheet dans Google Chart

**dubis** · 19/08/2021, 18h29

Bonjour,

Newbie en java, j'ai fait ce petit projet pour visualiser un TimeLine avec Google Chart avec Google Spreadsheets.

Mon projet ce trouve ici :
https://jsfiddle.net/7zo634dj/

Pour l'instant j'integre mes données avec la bonne forme à la main dans le script java

Maintenant j'aimerais corser la chose en allant chercher les donnes dans ce google Sheet suivant :
https://docs.google.com/spreadsheets...5rQ/edit#gid=0

J'ai donc fait ce projet :
https://jsfiddle.net/dubis/5ceomypd/9/
La colonne D contient les données déjà mises en forme que j'aimerais charger dans la variable dataSS

Notez que je me suis inspiré de ce projet qui est tres complet car il met en forme automatiquement en calculant lui même la start date et la End Date. Mais je me suis peut être un peut perdu car ce dernier utilise le JSon.txt
https://jsfiddle.net/kL624pfe/1/

Dans mon projet 5ceomypd, j'aimerais visualiser la variable dataSS pour savoir à quoi elle resemble pour avoir une meilleur idée d'integration dans l'objet dataTable.addRow
J'aimerais savoir si la meilleur solution est de prendre le JSON de Google Sheet. Du coup je pense qu'il a des la mise en forme des données à prendre en compte.

J'aimerais aussi savoir pourquoi il me manque une accolade dans 5ceomypd

Merci

**dubis** · 20/08/2021, 14h44

Bonjour,

J'ai trouvé ceci qui me montre les données du JSon dans la console et me donne le nombre de ligne et de colonne que j'ai selection dans Google SpreadSheet.

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
   google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
  var query = new google.visualization.Query('https://docs.google.com/spreadsheets/d/1zswd0w7nYC1zFsqxM0edK8Wji9YCBPPcHc1gPplD5rQ/gviz/tq?gid=0&range=D1:D20');
  query.send(function (response) {
    if (response.isError()) {
      console.log('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    };
 
    var dataTable = response.getDataTable();
    var jsonData = dataTable.toJSON();
 
    jsonData = JSON.parse(jsonData);
    document.getElementById('cols').innerHTML = jsonData.cols.length;
    document.getElementById('rows').innerHTML = jsonData.rows.length;
    console.log(jsonData);
  });
});
  
</script>
</head>
<body>
<div>Columns = <span id="cols"></span></div>
<div>Rows = <span id="rows"></span></div>
</body>
</html>

Console :

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
[object Object] {
  cols: [[object Object] {
  id: "D",
  label: "",
  type: "string"
}],
  rows: [[object Object] {
  c: [[object Object] {
  v: "[ 'Task 1', new Date(2021, 08, 03, 02, 00), new Date(2021, 08, 03, 02, 07) ],"
}]
}, [object Object] {
  c: [[object Object] {
  v: "[ 'Task 2', new Date(2021, 08, 03, 02, 45), new Date(2021, 08, 03, 04, 46) ],"
}]
}, [object Object] {
  c: [[object Object] {
  v: "[ 'Task 3', new Date(2021, 08, 03, 03, 00), new Date(2021, 08, 03, 03, 10) ],"
}]

https://jsbin.com/hizoyos/edit?html,console,output

J'aimerais faire apparaitre les ligne avec "v:" dans la page HTML.
J'ai lu la page de description WEB API de Mozilla, je n'y arrive pas

Merci

**NoSmoking** · 02/09/2021, 17h04

Bonjour,
lorsque l'on regarde ce que tu obtiens comme données je me dis que tu ne les lis pas correctement, tu devrais obtenir quelque chose comme
cols :

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
  "cols": [{
      "id": "A",
      "label": "Task ",
      "type": "string"
    },
    {
      "id": "B",
      "label": "Start",
      "type": "datetime",
      "pattern": "dd/MM/yyyy HH:mm:ss"
    },
    {
      "id": "C",
      "label": "End ",
      "type": "datetime",
      "pattern": "dd/MM/yyyy HH:mm:ss"
    }
  ],
  // etc

rows :

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
  "rows": [{
      "c": [{
          "v": "Task 1"
        },
        {
          "v": "Date(2021, 7, 3, 2, 0, 3)",
          "f": "03/08/2021 02:00:03"
        },
        {
          "v": "Date(2021, 7, 3, 2, 7, 8)",
          "f": "03/08/2021 02:07:09"
        }
      ]
    },
    // etc

alors que tu récupères quelque chose comme :
cols :

Code :

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

1
2
3
4
5
6
  "cols": [{
    "id": "D",
    "label": "",
    "type": "string"
  }],
  // etc

rows :

Code :

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

1
2
3
4
5
6
  "rows": [{
      "c": [{
        "v": "[ 'Task 1', new Date(2021, 08, 03, 02, 00), new Date(2021, 08, 03, 02, 07) ],"
      }]
    },
    // etc

cela ressemble à la récupération de cellule contenant une concaténation.

Fait plutôt ta récupération avec les « vraies cellules » rensignées

Code :

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

const query = new google.visualization.Query(".................................../tq?gid=0&range=A1:C20');

ensuite en mettant un console.log tu verras ce que tu obtiens !

Visualiser des données Google Sheet dans Google Chart

JavaScript

Discussions similaires

Partager

Partager