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

Question

Considere dibujar un gráfico de columnas y no obtengo ningún dato de la fuente 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

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 escondo la leyenda para comenzar, para que no aparezca con la columna ficticia, luego la agrego cuando se agrega la nueva columna.

Aquí hay un código de muestra que puede conectar al Google Visualization Playground que hace de 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 2

Una solución aún mejor para este problema podría ser utilizar 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 ningún setTimeout o función personalizada para eliminar u ocultar su columna. Pruébalo pegando el siguiente código 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 
    }); 
} 

Answer 3

La forma en que hice esto fue mediante la desactivación de las porciones de tarta, apagar información sobre herramientas, el relleno en un valor de simulación y lo que es de color 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 establece los dos elementos de la leyenda en gris. Creo que quizás solo puedas agregar un tercer elemento y hacerlo invisible solo en la leyenda. Aunque me gustaba 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 }); 
}