Tableaux de données et DataViews

Cette page décrit la représentation de données interne utilisée par les graphiques, les classes DataTable et DataView utilisées pour transmettre des données dans un graphique, ainsi que les différentes manières d'instancier et de renseigner un DataTable.

Sommaire

  1. Comment les données sont-elles représentées dans un graphique ?
  2. Quel schéma de table mon graphique utilise-t-il ?
  3. Tables de données et DataViews
  4. Créer et remplir une table de données
    1. Créer une table de données, puis appeler addColumn()/addRows()/addRow()/setCell()
    2. arrayToDataTable()
    3. Initialiseur de littéral JavaScript
    4. Envoyer une requête de source de données
  5. dataTableToCsv().
  6. En savoir plus

Comment les données sont-elles représentées dans un graphique ?

Tous les graphiques stockent leurs données dans une table. Voici une représentation simplifiée d'une table de données remplie à deux colonnes:

index: 0
type: string
label: 'Tâche'

 index: 1
type: number
label: 'Heures par jour'
'Travail' 11
"Manger" 2
Trajet domicile-travail 2
"Regarder la télévision" 2
"Sommeil" 7

Les données sont stockées dans des cellules référencées sous le nom (row, column), où row correspond à un index de ligne basé sur zéro, et column est un index de colonne de base zéro ou un ID unique que vous pouvez spécifier.

Voici une liste plus complète des éléments et propriétés acceptés pour le tableau. Pour en savoir plus, consultez la section Format du paramètre littéral JavaScript du constructeur:

  • Tableau : tableau de colonnes et de lignes, plus un mappage facultatif de paires nom/valeur arbitraires que vous pouvez attribuer. Les propriétés au niveau de la table ne sont actuellement pas utilisées dans les graphiques.
  • Colonnes : chaque colonne accepte un type de données requis, plus une étiquette de chaîne, un identifiant, un modèle et un mappage de propriétés de nom/valeur arbitraires facultatifs. L'étiquette est une chaîne conviviale qui peut être affichée par le graphique. L'ID est un identifiant facultatif qui peut être utilisé à la place d'un index de colonne. Une colonne peut être désignée dans le code par un index basé sur zéro ou par l'ID facultatif. Consultez la DataTable.addColumn() pour obtenir la liste des types de données acceptés.
  • Lignes : une ligne correspond à un tableau de cellules, plus une correspondance facultative de paires nom/valeur que vous pouvez attribuer.
  • Cellules : chaque cellule est un objet contenant une valeur réelle du type de colonne, plus une version facultative de la valeur que vous fournissez au format chaîne. Par exemple, une colonne numérique peut se voir attribuer la valeur 7 et la valeur mise en forme "sept". Si une valeur mise en forme est fournie, un graphique utilisera la valeur réelle pour les calculs et le rendu, mais peut afficher la valeur mise en forme le cas échéant, par exemple si l'utilisateur pointe sur un point. Chaque cellule dispose également d'un mappage facultatif de paires nom/valeur arbitraires.

Quel schéma de table mon graphique utilise-t-il ?

Différents graphiques utilisent des tables dans des formats différents. Par exemple, un graphique à secteurs attend une table à deux colonnes avec une colonne de chaînes et une colonne de nombres, où chaque ligne décrit une tranche, la première colonne correspond au libellé de la tranche et la deuxième colonne à la valeur de la tranche. En revanche, un graphique à nuage de points attend une table composée de deux colonnes numériques, où chaque ligne est un point, et les deux colonnes contenant les valeurs X et Y du point. Lisez la documentation de votre graphique pour connaître le format de données requis.

DataTables et DataViews

Un tableau de données de graphique est représenté en JavaScript par un objet DataTable ou un objet DataView. Dans certains cas, vous pouvez voir une version littérale JavaScript ou JSON d'un DataTable utilisé, par exemple lorsque des données sont envoyées sur Internet par une source de données d'outils graphiques, ou comme valeur d'entrée possible pour un ChartWrapper.

Un DataTable permet de créer la table de données d'origine. Un DataView est une classe pratique qui fournit une vue en lecture seule d'un DataTable, avec des méthodes permettant de masquer ou de réorganiser rapidement des lignes ou des colonnes sans modifier les données d'origine associées. Voici une brève comparaison des deux classes:

DataTable DataView
Lecture/Écriture Lecture seule
Peut être créé vide, puis renseigné Est une référence à un élément DataTable existant. Ne peut pas être renseigné à partir de zéro ; doit être instancié avec une référence à un DataTable existant.
Les données occupent de l'espace de stockage. Les données sont une référence à un DataTable existant et ne consomment pas d'espace.
Peut ajouter, modifier et supprimer des lignes, des colonnes et des données. Toutes les modifications sont définitives. Vous pouvez trier ou filtrer les lignes sans modifier les données sous-jacentes. Les lignes et les colonnes peuvent être masquées et affichées de façon répétée.
Clonage possible Peut renvoyer une version DataTable de la vue
Est une donnée source ; ne contient pas de références Référence en direct à un DataTable. Toute modification des données DataTable est immédiatement reflétée dans la vue.
Elles peuvent être transmises à un graphique en tant que source de données. Elles peuvent être transmises à un graphique en tant que source de données.
Incompatible avec les colonnes de calcul Accepte les colonnes de calcul, c'est-à-dire les colonnes dont la valeur est calculée à la volée en combinant ou en manipulant d'autres colonnes.
Aucune occultation de ligne ou de colonne Peut masquer ou afficher les colonnes sélectionnées

Créer et remplir une table de données

Il existe plusieurs façons de créer et d'alimenter une table de données:

Tableau de données vide + addColumn()/addRows()/addRow()/setCell()

Étapes :

  1. Instancier un nouveau DataTable
  2. Ajouter des colonnes
  3. Ajoutez une ou plusieurs lignes, éventuellement avec des données. Vous pouvez ajouter des lignes vides et les remplir ultérieurement. Vous pouvez également ajouter ou supprimer des lignes, ou modifier les valeurs des cellules individuellement.

Avantages :

  • Vous pouvez spécifier le type de données et l'étiquette de chaque colonne.
  • Convient pour générer le tableau dans le navigateur et est moins sujette aux fautes de frappe que la méthode littérale JSON.

Inconvénients :

  • Elle n'est pas aussi utile que de créer une chaîne littérale JSON à transmettre à un constructeur DataTable lors de la génération programmatique de la page sur un serveur Web.
  • Dépend de la vitesse du navigateur et peut être plus lent que les chaînes littérales JSON avec des tables plus volumineuses (environ 1 000 cellules ou plus).

Exemples :

Voici quelques exemples de création du même tableau de données en utilisant différentes variantes de cette technique:

// ------- Version 1------------
// Add rows + data at the same time
// -----------------------------
var data = new google.visualization.DataTable();

// Declare columns
data.addColumn('string', 'Employee Name');
data.addColumn('datetime', 'Hire Date');

// Add data.
data.addRows([
  ['Mike', {v:new Date(2008,1,28), f:'February 28, 2008'}], // Example of specifying actual and formatted values.
  ['Bob', new Date(2007,5,1)],                              // More typically this would be done using a
  ['Alice', new Date(2006,7,16)],                           // formatter.
  ['Frank', new Date(2007,11,28)],
  ['Floyd', new Date(2005,3,13)],
  ['Fritz', new Date(2011,6,1)]
]);



// ------- Version 2------------
// Add empty rows, then populate
// -----------------------------
var data = new google.visualization.DataTable();
  // Add columns
  data.addColumn('string', 'Employee Name');
  data.addColumn('date', 'Start Date');

  // Add empty rows
  data.addRows(6);
  data.setCell(0, 0, 'Mike');
  data.setCell(0, 1, {v:new Date(2008,1,28), f:'February 28, 2008'});
  data.setCell(1, 0, 'Bob');
  data.setCell(1, 1, new Date(2007, 5, 1));
  data.setCell(2, 0, 'Alice');
  data.setCell(2, 1, new Date(2006, 7, 16));
  data.setCell(3, 0, 'Frank');
  data.setCell(3, 1, new Date(2007, 11, 28));
  data.setCell(4, 0, 'Floyd');
  data.setCell(4, 1, new Date(2005, 3, 13));
  data.setCell(5, 0, 'Fritz');
  data.setCell(5, 1, new Date(2007, 9, 2));

arrayToDataTable()

Cette fonction d'assistance crée et renseigne un DataTable à l'aide d'un seul appel.

Avantages :

  • Code très simple et lisible exécuté dans le navigateur.
  • Vous pouvez soit spécifier explicitement le type de données de chaque colonne, soit laisser Google Charts déduire le type à partir des données transmises.
    • Pour spécifier explicitement le type de données d'une colonne, spécifiez un objet dans la ligne d'en-tête avec la propriété type.
    • Pour permettre à Google Charts de déduire le type, utilisez une chaîne pour l'étiquette de colonne.

Exemples :

var data = google.visualization.arrayToDataTable([
       ['Employee Name', 'Salary'],
       ['Mike', {v:22500, f:'22,500'}], // Format as "22,500".
       ['Bob', 35000],
       ['Alice', 44000],
       ['Frank', 27000],
       ['Floyd', 92000],
       ['Fritz', 18500]
      ],
      false); // 'false' means that the first row contains labels, not data.


var data = google.visualization.arrayToDataTable([
       [ {label: 'Year', id: 'year'},
         {label: 'Sales', id: 'Sales', type: 'number'}, // Use object notation to explicitly specify the data type.
         {label: 'Expenses', id: 'Expenses', type: 'number'} ],
       ['2014', 1000, 400],
       ['2015', 1170, 460],
       ['2016', 660, 1120],
       ['2017', 1030, 540]]);

Initialisation de littéraux JavaScript

Vous pouvez transmettre un objet littéral JavaScript à votre constructeur de table, en définissant le schéma de la table et éventuellement des données.

Avantages :

  • Utile lorsque vous générez des données sur votre serveur Web.
  • Traitement plus rapide que les autres méthodes pour les tableaux plus volumineux (environ 1 000 cellules et plus)

Inconvénients :

  • La syntaxe peut être difficile à obtenir et faire l'objet de fautes de frappe.
  • Le code n'est pas très lisible.
  • Ce format est semblable à JSON, mais pas identique.

Exemple :

var data = new google.visualization.DataTable(
   {
     cols: [{id: 'task', label: 'Employee Name', type: 'string'},
            {id: 'startDate', label: 'Start Date', type: 'date'}],
     rows: [{c:[{v: 'Mike'}, {v: new Date(2008, 1, 28), f:'February 28, 2008'}]},
            {c:[{v: 'Bob'}, {v: new Date(2007, 5, 1)}]},
            {c:[{v: 'Alice'}, {v: new Date(2006, 7, 16)}]},
            {c:[{v: 'Frank'}, {v: new Date(2007, 11, 28)}]},
            {c:[{v: 'Floyd'}, {v: new Date(2005, 3, 13)}]},
            {c:[{v: 'Fritz'}, {v: new Date(2011, 6, 1)}]}
           ]
   }
)

Envoyer une requête de source de données

Lorsque vous envoyez une requête à une source de données d'outils de graphique, une réponse réussie est une instance de table de données. Le DataTable renvoyé peut être copié, modifié ou copié dans un DataView de la même manière que tout autre DataTable.

function drawVisualization() {
    var query = new google.visualization.Query(
        'http://spreadsheets.google.com/tq?key=pCQbetd-CptGXxxQIG7VFIQ&pub=1');

    // Apply query language statement.
    query.setQuery('SELECT A,D WHERE D > 100 ORDER BY D');
    
    // Send the query with a callback function.
    query.send(handleQueryResponse);
  }

  function handleQueryResponse(response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
      return;
    }

    var data = response.getDataTable();
    visualization = new google.visualization.LineChart(document.getElementById('visualization'));
    visualization.draw(data, {legend: 'bottom'});
  }

dataTableToCsv()

La fonction d'assistance google.visualization.dataTableToCsv(data) renvoie une chaîne CSV avec les données de la table de données.

L'entrée de cette fonction peut être une table de données ou une vue de données.

Elle utilise les valeurs mises en forme des cellules. Les libellés de colonne sont ignorés.

Les caractères spéciaux tels que "," et "\n" sont échappés à l'aide des règles d'échappement standards des fichiers CSV.

Le code suivant affiche

Ramanujan,1729
Gauss,5050

dans la console JavaScript de votre navigateur:

<html>
  <head>
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  <script type="text/javascript">
   google.charts.load("current", {packages:['corechart']});
   google.charts.setOnLoadCallback(drawChart);
   function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Name', 'Number'],
        ['Ramanujan', 1729],
        ['Gauss', 5050]
      ]);
    var csv = google.visualization.dataTableToCsv(data);
    console.log(csv);
  }
  </script>
  </head>
</html>

Plus d'infos