version.csv
KM,-
7.8.2,6
7.12.0,5
7.12.1,3
7.12.2,42
8.1.0,10
8.1.1,27
8.4.0,12
6.9.2,7
6.12.0,3
7.2.0,3
7.2.2,6
7.3.3,10
7.8.2,8
7.8.3,2
index.html
<!DOCTYPE html>
<html>
<head>
<title>Chart using XML Data</title>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var dataPoints = [];
function getDataPointsFromCSV(csv) {
var dataPoints = [];
var csvLines = [];
var points = [];
csvLines = csv.split(/[\r?\n|\r|\n]+/);
for (var i = 0; i < csvLines.length-1; i++)
if (csvLines[i].length > 0) {
points = csvLines[i].split(",");
dataPoints.push({
x: parseFloat(points[0]),
y: parseFloat(points[1])
}); console.log(points)
}
return dataPoints;
}
$.get("version.csv", function(data) {
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Chart from CSV",
},
data: [{
type: "pie",
dataPoints: getDataPointsFromCSV(data)
}]
});
chart.render();
});
}
</script>
</head>
<body>
<div id="chartContainer" style="width:100%; height:800px;"></div>
</body>
</html>
.
