Почему график не меняется в зависимости от выбранного?

Question

Я пытаюсь показать график внутри сайта, используя Spring MVC и JSP. Мне удалось показать график. Но теперь я просто хочу показать тип диаграммы (например, круговая диаграмма / линейка и т. Д.), Предоставив «опцию выпадающего списка». Идея в том, чтобы выбрать вариант из выпадающего меню. Диаграмма будет отображаться на основе того, что я выбрал. Например, если я выберу бар, он должен показать гистограмму.

Но в действительности, когда я запускаю веб-сайт в первый раз (предварительное условие: выпадающий список выбора с опцией "bar" по умолчанию), он также может отображать график. Но, когда я попытался изменить тип диаграммы, результат не изменился, как я выбрал. Он по-прежнему показывает гистограмму.

Это код JSP:

<select id="typeChart" class="w3-dropdown-hover w3-khaki" onchange="changeTypeChart(this);">
    <option value="pie">Pie</option>
    <option value="column" selected="selected">Bar</option>
    <option value="line">Line</option>
</select>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

<input type="button" value="Save PNG" class="button" id="btn-download" />

Это код JavaScript:

<script type="text/javascript">

var typeChart1;
var selectedValue;
var dataPoints = [];
window.onload = function() {

    var title_file = document.getElementById("titleFile").innerHTML;
    var blob = document.getElementById('ini').innerHTML;
    console.log("blob " +  blob);



    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        exportEnabled: true,
        title: {
            text: title_file
        },
        axisY: {
            title: "Index PA",
            includeZero: true
        },
        axisX: {
            title: "Time",
        },
        data: [{
            type: selectedValue,
            toolTipContent: "{y} stat index",
            dataPoints: dataPoints
        }]
    });

    changeTypeChart(blob, chart);



}
function getDataPointsFromCSV(csv, chart) {
    if (csv != null){
        console.log("ini di fc");
        // console.log(csv);
        var points;
        var csvLines = csv.split(/[\r?\n|\r|\n]+/);
        for (var i = 2; i < csvLines.length; i++) {
            if (csvLines[i].length > 0) {
                points = csvLines[i].split(";");
                // console.log(points[12]);
                dataPoints.push({
                    label: points[2],
                    y: parseFloat(points[12])
                });
            }
        }

        chart.render();
    }else{
        console.log("csv is not get");
    }
}
function changeTypeChart(blob, chart){
    typeChart1 = document.getElementById("typeChart");
    selectedValue = typeChart1.options[typeChart1.selectedIndex].value;

    console.log("this is type chart : "  + selectedValue);
    getDataPointsFromCSV(blob, chart);
}

И я также получил следующую ошибку:

Uncaught TypeError: Cannot read property 'match' of undefined
    at new S (canvasjs.min.js:133)
    at q._initialize (canvasjs.min.js:171)
    at q.render (canvasjs.min.js:177)
    at getDataPointsFromCSV (act:20185)
    at changeTypeChart (act:20195)
    at window.onload (act:20163)

Есть идеи, как это решить?