google visualization - haxis - ¿Cómo mostrar un gráfico de Google vacío cuando no hay datos?

google visualization columnchart

Question

Considere dibujar un gráfico de columnas y no obtengo datos del origen de datos. ¿Cómo dibujamos un gráfico vacío en lugar de mostrar un mensaje predeterminado de color rojo que dice "La tabla no tiene columnas"? Cualquier ayuda apreciada. ¡Gracias por adelantado!

Answer 1

La forma en que lo hice fue deshabilitando los cortes de tarta, desactivando la información sobre herramientas, rellenando un valor ficticio y haciéndolo gris. Estoy seguro de que hay formas más inteligentes de hacer esto, pero esto funcionó para mí donde los otros métodos no lo hicieron.

El único inconveniente es que también configura ambos elementos de la leyenda en gris. Creo que tal vez podría simplemente agregar un tercer elemento y hacerlo invisible solo en la leyenda. Aunque me gustó de esta manera.

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 } );
}

Answer 2

Lo que hago es inicializar mi gráfico con 1 columna y 1 punto de datos (establecido en 0). Luego, cada vez que se agregan datos, compruebo si solo hay 1 columna y que es la columna ficticia, luego la elimino. También oculto la leyenda para comenzar de modo que no aparezca con la columna ficticia, luego la agrego cuando se agrega la nueva columna.

Aquí hay un código de ejemplo que puede conectar a Google Visualization Playground que hace lo que estoy hablando. Debería ver el gráfico vacío durante 2 segundos, luego se agregarán los datos y aparecerán las columnas.

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);
}​

Answer 3

Una solución aún mejor para este problema podría ser usar una columna de anotación en lugar de una columna de datos como se muestra a continuación. Con esta solución, no necesita utilizar setTimeout o una función personalizada para eliminar u ocultar su columna. Pruébelo pegando el código dado a continuación en 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
  });
}

En