Visualiser des données Google Sheet dans Google Chart

Version imprimable

19/08/2021, 18h29
dubis

Visualiser des données Google Sheet dans Google Chart

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

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:

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:

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

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:

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:

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:

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

rows :

Code:

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:

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

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