Chart from Different CSV based on Selected Radio Button - CanvasJS JavaScript Charts

Chart from Different CSV based on Selected Radio Button - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div>
    Please select your preferred CSV:<br/>
    <input type="radio" name="csv" value="CSV1" checked>CSV1<br>
    <input type="radio" name="csv" value="CSV2">CSV2<br>
</div>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var URL = "", csvValue = "";
var dataPoints = [];

if($('input[name=csv]').is(':checked')) {
    csvValue = 'CSV1';
    URL = "https://codepen.io/vishwas/pen/Ewqppe.js";
    readCSV(URL);
}

$('input:radio[name=csv]').change(function() {
    if(this.value == 'CSV1'){
        csvValue = 'CSV1';
        URL = "https://codepen.io/vishwas/pen/Ewqppe.js";
        readCSV(URL);
    }
    else if(this.value == 'CSV2') {
        csvValue = 'CSV2';
        URL = "https://codepen.io/vishwas/pen/LzwBBa.js";
        readCSV(URL);
    }
});

function drawChart(dataPoints) {
    var chart = new CanvasJS.Chart("chartContainer", {
        zoomEnabled: true,
        title:{
          text: ""
        },
        axisX:{
            labelAngle: 0,
            labelWrap:true,
            labelAutoFit: false,
            labelFontSize:15,
            labelMaxWidth: 50,
            labelFontColor: "black"
        },
        data: [{
            indexLabelPlacement: "outside",
            indexLabelFontWeight: "bold",
            indexLabelFontColor: "black",
            type: "column",
            dataPoints: dataPoints
        }]
    });
    chart.render();
    chart.title.set("text", csvValue === 'CSV1' ? 'Chart from CSV 1' : 'Chart from CSV 2');
}

function processData(allText) {
    var allLinesArray = allText.split("\n");
    if( allLinesArray.length > 0 ){
        var dataPoints = [];
        for (var i = 0; i <= allLinesArray.length-1; i++) {
            var rowData = allLinesArray[i].split(",");
            dataPoints.push({ label: rowData[0], y: parseInt(rowData[1]) });
        }
        drawChart(dataPoints);
    }
}

function readCSV(URL) {
    $.ajax({
        type: 'GET',
        url: URL,
        dataType: "text",
        success: function(data) {
          	processData(data);
        }    
    });
}