How to draw empty google.visualization.BubbleChart

Question

I need to draw empty google charts initially, while the data is loading by xhr. It is successful with a lots of chart type but not with BubbleChart.

Look at this little fiddle below. It fails with "a.pl is null" message under firefox and "Cannot read properties of null (reading '0')" message under chrome.

Just change BubbleChart to LineChart, AreaChart or BarChart for example, and it works well.

How to draw empty BubbleChart?

google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);

function drawSeriesChart() {
    let dataTable = new google.visualization.DataTable();
    let initialColumnData = [["c1", "string"], ["c2", "number"], ["c3", "number"], ["c4", "number"], ["c5", "number"]];
    for (var columnIndex = 0; columnIndex < initialColumnData.length; columnIndex++) {
        let column = initialColumnData[columnIndex];
        dataTable.addColumn(column[1], column[0]);
    }
    let options = {
        hAxis: {
            title: 'x'
        },
        vAxis: {
            title: 'y'
        }
    };
    let chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
    chart.draw(dataTable, options);
}

user_5090771 · Answer

you can add a blank row of data...

    dataTable.addRow(['', null, null, 0, 0]);

and if you don't want the size axis to be displayed...

    colorAxis: {
      legend: {
        position: 'none'
      }
    }

see following working snippet...

google.charts.load('current', {
    'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);

function drawSeriesChart() {
    let dataTable = new google.visualization.DataTable();
    let initialColumnData = [["c1", "string"], ["c2", "number"], ["c3", "number"], ["c4", "number"], ["c5", "number"]];
    for (var columnIndex = 0; columnIndex < initialColumnData.length; columnIndex++) {
        let column = initialColumnData[columnIndex];
        dataTable.addColumn(column[1], column[0]);
    }
    dataTable.addRow(['', null, null, 0, 0]);
    let options = {
        hAxis: {
            title: 'x'
        },
        vAxis: {
            title: 'y'
        }
    };
    let chart = new google.visualization.BubbleChart(document.getElementById('series_chart_div'));
    chart.draw(dataTable, options);
}

How to draw empty google.visualization.BubbleChart

1 Answers