I am using the following script to draw line charts with canvasjs upon option selection :
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="jquery-2.1.4.min.js"></script>
<select id="option">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<script type="text/javascript">
$(document).ready(function () {
$("#option").change(function(){
var i = $(this).val();
if(i == "volvo"){
$.ajax({
type: "GET",
url:"proba1.csv",
dataType: "text",
success: function(data) {processData(data);}
});
function processData(allText) {
var allLinesArray = allText.split('\r\n');
if(allLinesArray.length>0){
var dataPoints = [];
for (var i = 1; i <= allLinesArray.length-1; i++) {
var rowData = allLinesArray[i].split(';');
dataPoints.push({label:rowData[0],y:parseInt(rowData[1])});
}
drawChart(dataPoints);
}
}
function drawChart(dataPoints) {
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
zoomEnabled:true,
title:{
text: "RPM"
},
legend: {
horizontalAlign: "right",
verticalAlign: "center"
},
data: [
{
type: "line",
dataPoints: dataPoints
}]
});
chart.render();
}
}
if(i == "saab"){
$.ajax({
type: "GET",
url:"proba1.csv",
dataType: "text",
success: function(data) {processData(data);}
});
function processData(allText) {
var allLinesArray = allText.split('\r\n');
if(allLinesArray.length>0){
var dataPoints1 = [];
for (var i = 1; i <= allLinesArray.length-1; i++) {
var rowData = allLinesArray[i].split(';');
dataPoints1.push({label:rowData[0],y:parseInt(rowData[2])});
}
drawChart1(dataPoints1);
}
}
function drawChart1(dataPoints1) {
var chart1 = new CanvasJS.Chart("chartContainer", {
theme: "theme2",
zoomEnabled:true,
title:{
text: "RPM"
},
legend: {
horizontalAlign: "right",
verticalAlign: "center"
},
data: [
{
type: "line",
dataPoints: dataPoints1
}]
});
chart1.render();
}
}
});
});
</script>
<script type="text/javascript" src="canvasjs.min.js"></script>
</head>
<div id="chartContainer" style="height: 300px; width:100%;"></div>
<center><b>This is a test text</b></center>
</body>
</html>
However when i select saab option and then change to volvo option the new chart isn't rendered - its the old one.
Issue is that you have used the same name (processData) for two functions while JavaScript does not support block scope. So the second definition of function is being used always.
Try changing second function name to processData1 and it should work fine.