GoogleChart Piechart is not shown up when using CategoryFilter

Question

I am using GoogleChart to query data from googlesheet, and am able to get the data. But when I tried to plot Piechart, it does not work.

function drawDashboard() {
  var queryString = encodeURIComponent('SELECT A, B, C');

  var query = new google.visualization.Query(
            'myurl/gviz/tq?sheet=Sheet1&headers=1&tq=' + queryString);

  query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
    if (response.isError()) {
        console.error('Error in query: ' + response.getMessage());
    } else {
        console.log('Data retrieved successfully.');
    }

    if (response.getDataTable()) {
        console.log('Data table retrieved:');
        console.log(response.getDataTable());

        //var data = response.getDataTable();

        var data = google.visualization.arrayToDataTable([
            ['AssignmentSubject', 'Ethnicity', 'Enrolled'],
            ['School A' , 'AAA', 1],
            ['School A', 'BBB', 2],
            ['School A', 'CCC', 3],
            ['School B', 'AAA', 4],
            ['School B', 'BBB', 5],
            ['School B', 'CCC', 6],
            ['School C' , 'AAA', 7],
            ['School C', 'BBB', 8],
            ['School C', 'AAA', 9],        ]);

        var numberOfRecords = data.getNumberOfRows();
        alert(numberOfRecords);

        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div')
        );

        var courseFilter = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'filter_div',
            'options': {
                'filterColumnLabel': 'AssignmentSubject',
                'ui': {
                    'allowMultiple': false,
                    'allowTyping': false,
                    'sortValues': true,
                    'selectedValues': ['All'],
                    'allowNone': false
                }
            }
        });


        var pieChart = new google.visualization.ChartWrapper({
            'chartType': 'PieChart',
            'containerId': 'chart_div',
            'options': {
                'width': 400,
                'height': 300,
                'pieSliceText': 'value',
                'legend': 'right'
            }
        });

        dashboard.bind(courseFilter, pieChart);
        dashboard.draw(data);
    }
}

The 1st data part is to extract data from googlesheet, and I am able to get them. The 2nd data is to test without extracting from googlesheet.

The categoryfilter works fine. I can see School A/B/C from the category dropdown, but the piechart is not shown.