Draw Google Line Chart with multiple missing values

Question

I copied this code from Google Line Chart reference and made some small changes:

function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Dag');
    data.addColumn('number', 'Målvikt');
    data.addColumn('number', 'Uppmätt vikt');


    data.addRows([
      [1, 37.8, 55.0],
      [2, null, 69.5],
      [3, null, 57],
      [4, null, 18.8],
      [5, null, 17.6],
      [6, null, 13.6],
      [7, null, 12.3],
      [8, null, 29.2],
      [9, null, 42.9],
      [10, null, 30.9],
      [11, null, 7.9],
      [12, null, 8.4],
      [13, null, 6.3],
      [14, 30.8, 6.2]
    ]);

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

My first line is not generated at all. As you see, I want to just give the first and last value for the curve named "Målvikt" and draw a straight line between them. I found this related question and added interpolateNulls: true but actually it did not solve my problem. I then changed all nulls except one to some value, but there still was no line between its neighbors. What am I doing wrong?

Answer 1

It seems that google.charts.Line component does not support interpolateNulls option.

Secondly, there is typo in specifying interpolateNulls option.

Since interpolateNulls property does not belong to chart property according to Configuration Options, the line:

var options = {
    chart: {
        interpolateNulls: true
    }
};

should be replaced with:

var options = {
    interpolateNulls: true
}; 

Having said that, i would recommend to utilize google.visualization.LineChart from corechart package instead of google.charts.Line component from line package. In that case interpolateNulls option could applied as demonstrated below:

Working example

google.load('visualization', '1.1', { packages: ['corechart'] });
google.setOnLoadCallback(drawChart);


function drawChart() {

    var data = new google.visualization.DataTable();
    data.addColumn('number', 'Dag');
    data.addColumn('number', 'Målvikt');
    data.addColumn('number', 'Uppmätt vikt');


    data.addRows([
     [1, 37.8, 55.0],
     [2, null, 69.5],
     [3, null, 57],
     [4, null, 18.8],
     [5, null, 17.6],
     [6, null, 13.6],
     [7, null, 12.3],
     [8, null, 29.2],
     [9, null, 42.9],
     [10, null, 30.9],
     [11, null, 7.9],
     [12, null, 8.4],
     [13, null, 6.3],
     [14, 30.8, 6.2]
    ]);

    var options = {
        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'));
    var chart = new google.visualization.LineChart(document.getElementById('linechart_material'));


    chart.draw(data, options);
}

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<div id="linechart_material" style="width: 640px; height: 480px"></div>