在Google图表上处理空数据

Question

I'm trying to create compound chart with a given data, that is, [date, value1, value2], however I can not handle such inputs:

// [["Day","Dose","INR"],["17/04",1.5,null]]
// [["Day","Dose","INR"]]
// [["Day","Dose","INR"],["17/04",1.5,null],["18/04",2.5,null]]

that is, when there are a set of data with a particular value all consist of nulls, I can not draw it on graph. Such inputs are fine:

// [["Day","Dose","INR"],["17/04",1.5,null],["18/04",2.5,0.9]]
// [["Day","Dose","INR"],["17/04",1.5,null],["18/04",2.5,0.9],["19/04",null,1.4]]

And here is my javascript code drawing the graph. Data is coming from a Ruby model.

$(function () { 

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

    function drawVisualization() {
        // Some raw data (not necessarily accurate)
        var data = google.visualization.arrayToDataTable(<%= DrugInr.generate_array(@patient) %>);

        var options = {
            vAxes: { 1: {title: 'Dose', format: '#.#', maxValue: 20}, 
            0: {title: 'INR',format: '#.#', minValue: -1, baselineColor:"#CCCCCC"} },
            hAxis: {title: 'Day'},
            seriesType: 'bars',
            bar: {
                groupWidth: 2
            },
            series: {
                0:{ type: "bars", targetAxisIndex: 1 },
                1:{ type: 'line', targetAxisIndex: 0}

            }
    };



var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);

}
});

How can I handle these half empty values?

Answer 1

I solved this creating my data table like this:

var data = new google.visualization.DataTable();
data.addColumn('string', 'Date');
data.addColumn('number', 'INR');
data.addColumn('number', 'Dosage');
data.addRows(<%= DrugInr.generate_array(@patient) %>);

var options = {
    vAxes: { 1: {title: 'Dose', format: '#.#', maxValue: 20}, 
    0: {title: 'INR',format: '#.#', minValue: -1, baselineColor:"#CCCCCC"} },
    hAxis: {title: 'Day'},
    seriesType: 'bars',
    bar: {
        groupWidth: 5
    },
    series: {
        0:{ type: "bars", targetAxisIndex: 1 },
        1:{ type: 'line', targetAxisIndex: 0}

    }
};

Answer 2

I would recommend the interpolateNulls option. See the ComboChart Configuration Options documentation for details.

var options = {
    interpolateNulls: true
};

This option just tells the chart to guess what your values are if there's a null, rather than leave a gap. Works for most cases, anyway.