Tableaux de données et DataViews

Cette page aborde 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 représentées dans un graphique
  2. Quel schéma de table mon graphique utilise-t-il ?
  3. DataTables 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. Initialisation littérale JavaScript
    4. Envoyer une requête de source de données
  5. dataTableToCsv().
  6. En savoir plus

Comment les données sont représentées dans un graphique

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

index: 0
type: chaîne
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 la forme (row, column), où row correspond à un index de ligne basé sur zéro et column représente un index de colonne basé sur zéro ou un identifiant unique que vous pouvez spécifier.

Voici une liste plus complète des éléments et des propriétés acceptés dans le tableau. Pour en savoir plus, consultez Format du paramètre littéral de 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 par les graphiques.
  • Colonnes : chaque colonne accepte un type de données obligatoire, ainsi qu'une étiquette de chaîne, un identifiant, un modèle et un mappage de propriétés de nom/valeur arbitraires. L'étiquette est une chaîne conviviale qui peut être affichée par le graphique. L'ID est un identifiant facultatif pouvant être utilisé à la place d'un index de colonne. Une colonne peut être référencée dans le code par un index basé sur zéro ou par l'identifiant facultatif. Consultez la DataTable.addColumn() pour obtenir la liste des types de données compatibles.
  • Lignes : une ligne est un tableau de cellules et un mappage facultatif de paires nom/valeur arbitraires que vous pouvez attribuer.
  • Cellules : chaque cellule est un objet contenant une valeur réelle du type de colonne, ainsi qu'une version facultative au format chaîne de la valeur fournie. Par exemple, vous pouvez attribuer la valeur "7" à la colonne "Valeur 7" et la valeur "7" à la colonne "Formaté". Si une valeur formatée est fournie, un graphique utilise la valeur réelle pour les calculs et l'affichage, mais peut afficher la valeur formatée si nécessaire, par exemple si l'utilisateur pointe sur un point. Chaque cellule comporte également un mappage facultatif de paires nom/valeur arbitraires.

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

Différents graphiques utilisent des tableaux dans différents formats: par exemple, un graphique à secteurs attend un tableau à deux colonnes avec une colonne de chaîne et une colonne numérique, où chaque ligne décrit une tranche, la première colonne étant l'étiquette de tranche et la deuxième colonne la valeur de la tranche. Un graphique à nuage de points s'attend toutefois à un tableau composé de deux colonnes numériques, chaque ligne représentant un point et les deux colonnes représentant les valeurs X et Y du point. Lisez la documentation de votre graphique pour connaître le format de données requis.

Tableaux de données et DataViews

Un tableau de données de graphique est représenté en JavaScript par un objet DataTable ou DataView. Dans certains cas, une version littérale ou JSON d'un tableau de données utilisé peut s'afficher, par exemple lorsque les données sont envoyées via Internet par une source de données Chart Tools, ou comme valeur d'entrée possible pour un ChartWrapper.

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

Tableau de données Vue de données
Lecture/Écriture Lecture seule
Peut être vide, puis être renseigné Référence à un élément DataTable existant. ne peut pas être entièrement renseigné. Il 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 à une ressource DataTable existante et ne consomment pas d'espace.
Peut ajouter/modifier/supprimer des lignes, des colonnes et des données, et toutes les modifications sont persistantes. Peut trier ou filtrer les lignes sans modifier les données sous-jacentes. Les lignes et les colonnes peuvent être masquées et affichées plusieurs fois.
Clonage possible Peut renvoyer une version DataTable de la vue
Données sources ; ne contiennent 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.
Peut être transmis à un graphique en tant que source de données Peut être transmis à un graphique en tant que source de données
Non compatible avec les colonnes de calcul Accepte les colonnes de calcul, c'est-à-dire des colonnes dont la valeur est calculée à la volée en combinant ou en manipulant d'autres colonnes.
Pas de masquage de ligne ou de colonne Peut afficher ou masquer les colonnes sélectionnées

Créer et renseigner une table de données

Il existe plusieurs façons de créer et d'insérer des données dans un tableau de données:

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

Étapes :

  1. Instancier une nouvelle DataTable
  2. Ajouter des colonnes
  3. Ajoutez une ou plusieurs lignes, qui peuvent éventuellement contenir des données. Vous pouvez ajouter des lignes vides et les renseigner ultérieurement. Vous pouvez également ajouter ou supprimer des lignes, ou modifier les valeurs de cellule individuellement.

Avantages :

  • Vous pouvez spécifier le type de données et l'étiquette de chaque colonne.
  • Bonne génération de la table dans le navigateur et moins sujet aux fautes de frappe que la méthode littérale JSON.

Inconvénients :

  • Cela 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 par programmation 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).

Exemples :

Voici quelques exemples de création du même tableau de données à l'aide de 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));

tableauToDataTable()

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

Avantages :

  • Code très simple et lisible exécuté dans le navigateur.
  • Vous pouvez spécifier explicitement le type de données de chaque colonne ou 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éterminer le type, utilisez une chaîne pour le libellé de la 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 littérale 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 lors de la génération de données sur votre serveur Web.
  • Traitement plus rapide que les autres méthodes pour les tableaux plus volumineux (plus de 1 000 cellules)

Inconvénients :

  • La syntaxe est difficile à utiliser et peut entraîner des fautes de frappe.
  • Le code n'est pas très lisible.
  • Bien que similaire, mais non identique, à JSON.

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 Chart Tools, une réponse réussie est une instance DataTable. Cette table de données renvoyée peut être copiée, modifiée ou copiée dans une DataView, comme n'importe quelle autre table de données.

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 un tableau de données ou un affichage de données.

Elle utilise les valeurs formatées des cellules. Les libellés au niveau des colonnes sont ignorés.

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

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