Google图表未绘制

Question

有人可以告诉我为什么我的图表没有绘制吗？我的数据正在从数据库中提取以填充图表。但是出于这个问题，我对其进行了硬编码。我不确定是什么问题，但是折线图根本没有画出来。

这是我的代码：

 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript">
    // Load the Visualization API and the corechart package.
  google.charts.load('current', {'packages':['corechart']});

    // Draw line chart progress report
  google.charts.setOnLoadCallback(drawLineChart);

  // Draw pie chart rankings report
  google.charts.setOnLoadCallback(drawPieChart);

    $(window).onresize(function(event) {
        drawLineChart();
        drawpieChart();
    });

  // Callback that draws line chart for progress report
  function drawLineChart() {


    var data = google.visualization.arrayToDataTable([

        ['Year', 'Garden State Feis', {type: 'string', role: 'tooltip'}, 'GEM CITY FEIS', {type: 'string', role: 'tooltip'},],

         [2014, 20, 'Feis: Garden State Feis Date: -1-5-2014 Rank: 20th Place'], [2018, 1, 'Feis: GEM CITY FEIS Date: -2-14-2018 Rank: 1st place'],
      ]);




    var columnsTable = new google.visualization.DataTable();
      columnsTable.addColumn('number', 'colIndex');
      columnsTable.addColumn('string', 'colLabel');
    var initState= {selectedValues: []};
      for (var i = 1; i < data.getNumberOfColumns(); i++) {
          columnsTable.addRow([i, data.getColumnLabel(i)]);
          //initState.selectedValues.push(data.getColumnLabel(1));
         // initState.selectedValues.push(data.getColumnLabel(3));
      } 





      // build ticks
var ticks = [];
for (var i = 0; i <= 60; i = i + 15) {
  addTick(i);
}
function addTick(i) {
  var place;
  var digit;
  if (i === 0) {
    i = 1;
  }
  digit = i.toString().substr(i.toString().length - 1);
  switch (digit) {
    case '1':
      place = 'st place';
      break;

    case '2':
      place = 'nd place';
      break;

    case '3':
      place = 'rd place';
      break;

    default:
      place = 'th place';
  }  
  ticks.push({
    v: i,
    f: i + place
  });
}

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'line_chart',
        dataTable: data,
        options: {
            title: 'Feis compeition placements over the years',
            tooltip: {isHtml: true},
            //pointSize: 5,
           // width: 670,
            //height: 550,
            hAxis: {
                format: '0',
                ticks: data.getDistinctValues(0),
                gridlines: {
                    color: 'transparent'
                }
            },
            interpolateNulls: true,
            legend: { 
               // position: 'bottom' 
            },
            vAxis: { 
                title: 'Competition Placement', 
                direction: -1, 
                gridlines: {count: 10}, 
                ticks: ticks
            }
        }
    });  

      chart.draw();

    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'filter_lines',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Filter',
                allowTyping: true,
                selectedValuesLayout: 'asideWrapping',
                caption: 'Choose a Feis...',
                labelStacking: 'vertical'
            }
        },
        state: initState
    });

    google.visualization.events.addListener(columnFilter, 'statechange', function () {
    var state = columnFilter.getState();
    var row;
    var columnIndices = [0];
    for (var i = 0; i < state.selectedValues.length; i++) {
        row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
        columnIndices.push(columnsTable.getValue(row, 0));
    }
    // sort the indices into their original order
    columnIndices.sort(function (a, b) {
        return (a - b);
    });
    chart.setView({columns: columnIndices});
    chart.draw();
});

columnFilter.draw();
}

此图表在我的arrayToDataTable像这样之前绘制得很完美：

["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
          [2014,  1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
          [2015,  11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
          [2016,  60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],
          [2017,  10, "Feis: Orouke Feis Date: 9-25-2017 Rank: 10th Place", null, "", null, ""],
          [2014,  null, "", 4, "Feis: Feis Nara Feis Date: 2-1-2014 Rank: 4th Place", null, ""],
          [2015,  null, "", 46, "Feis: Feis Nara Feis Date: 3-26-2015 Rank: 46th Place", null, ""],
          [2016,  null, "", null, "", null, ""],
          [2017,  null, "", 5, "Feis: Feis Nara Feis Date: 1-25-2017 Rank: 5th Place", null, ""],
          [2014,  null, "", null, "", 12, "Feis: Garden State Feis Date: 5-17-2014 Rank: 12th Place"],
          [2016,  null, "", null, "", 26, "Feis: Garden State Feis Date: 8-27-2016 Rank: 26th Place"],

    ]); 

我真的需要包含null才能使其正常工作吗？