Interpolate Nulls with Google Charts

Question

I'm trying to display this chart and sometimes there will be null values in each row. I've added the "interpolateNulls" to my options but it still isn't working. Is is probably an easy fix but I am stuck.

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Day');
    data.addColumn('number', 'Guardians of the Galaxy');
    data.addColumn('number', 'The Avengers');
    data.addColumn('number', 'Transformers: Age of Extinction');

    data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9, null, 42.9, null],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
    ]);

    var options = {
        chart: {
            title: 'Box Office Earnings in First Two Weeks of Opening',
            subtitle: 'in millions of dollars (USD)',
        },
        interpolateNulls: true,
        width: 900,
        height: 500
    };

    var chart = new google.charts.Line(document.getElementById('linechart-material'));
    chart.draw(data, google.charts.Line.convertOptions(options));
}

Answer 1

interpolateNulls is one of many options not supported by Material charts

Material: google.charts.Line

see --> Tracking Issue for Material Chart Feature Parity

---

instead, recommend using a Classic chart, with the following option...

theme: 'material'

Classic: google.visualization.LineChart