web-dev-qa-db-fra.com

Comment afficher un graphique Google vide lorsqu'il n'y a pas de données?

Envisagez de dessiner un graphique à colonnes et je n'obtiens aucune donnée de la source de données. Comment dessiner un graphique vide au lieu d'afficher un message par défaut de couleur rouge disant "Le tableau n'a pas de colonnes"?

google-visualization
25
Vamshi Vangapally

Ce que je fais, c'est initialiser mon graphique avec 1 colonne et 1 point de données (réglé sur 0). Ensuite, chaque fois que des données sont ajoutées, je vérifie s'il n'y a qu'une seule colonne et qu'il s'agit de la colonne factice, puis je la supprime. Je masque également la légende pour commencer afin qu'elle n'apparaisse pas avec la colonne factice, puis je l'ajoute lorsque la nouvelle colonne est ajoutée.

Voici un exemple de code que vous pouvez connecter au Google Visualization Playground qui fait ce dont je parle. Vous devriez voir le graphique vide pendant 2 secondes, puis les données seront ajoutées et les colonnes apparaîtront.

var data, options, chart;

function drawVisualization() {

  data = google.visualization.arrayToDataTable([
    ['Time', 'dummy'],
    ['', 0],
   ]);

  options = {
    title:"My Chart",
    width:600, height:400,
    hAxis: {title: "Time"},
    legend : {position: 'none'}
  };

  // Create and draw the visualization.
  chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
  chart.draw(data,options);
  setTimeout('addData("12:00",10)',2000);
  setTimeout('addData("12:10",20)',3000);
}

function addData(x,y) {
  if(data.getColumnLabel(1) == 'dummy') {
    data.addColumn('number', 'Your Values', 'col_id');
    data.removeColumn(1);
    options.legend = {position: 'right'};
  }

  data.addRow([x,y]);
  chart.draw(data,options);
}​
15
Matt Dodge

Une solution encore meilleure pour ce problème pourrait être d'utiliser une colonne d'annotation au lieu d'une colonne de données comme indiqué ci-dessous. Avec cette solution, vous n'avez pas besoin d'utiliser de setTimeout ou de fonction personnalisée pour supprimer ou masquer votre colonne. Essayez-le en collant le code ci-dessous dans Google Code Playground .

function drawVisualization() {
  var data = google.visualization.arrayToDataTable([
      ['', { role: 'annotation' }],
      ['', '']
  ]);

  var ac = new google.visualization.ColumnChart(document.getElementById('visualization'));
  ac.draw(data, {
      title : 'Just a title...',
      width: 600,
      height: 400
  });
}

La

12
AntonSjoberg

J'ai fait cela en désactivant les tranches de tarte, en désactivant les info-bulles, en insérant une valeur factice et en la rendant grise. Je suis sûr qu'il existe des moyens plus intelligents de le faire, mais cela a fonctionné pour moi là où les autres méthodes ne fonctionnaient pas.

Le seul inconvénient est qu'il définit également les deux éléments de la légende en gris. Je pense que vous pourriez peut-être simplement ajouter un troisième élément et le rendre invisible uniquement sur la légende. J'ai aimé cette façon cependant.

function drawChart() {
// Define the chart to be drawn.
  data = new google.visualization.DataTable();
  data.addColumn({type: 'string', label: 'Result'});
  data.addColumn({type: 'number', label: 'Count'});
  data.addRows([
          ['Value A', 0],
          ['Value B', 0]
  ]);

  var opt_pieslicetext = null;
  var opt_tooltip_trigger = null;
  var opt_color = null;
  if (data.getValue(1,1) == 0 && data.getValue(0,1) == 0) {
     opt_pieslicetext='none';
     opt_tooltip_trigger='none'
     data.setCell(1,1,.1);
     opt_color= ['#D3D3D3'];
  } 
  chart = new google.visualization.PieChart(document.getElementById('mydiv'));
  chart.draw(data, {sliceVisibilityThreshold:0, pieSliceText: opt_pieslicetext, tooltip: { trigger: opt_tooltip_trigger }, colors: opt_color } );
}
0
woot