Home forums Using CanvasJS Graph a CSV file Reply To: Graph a CSV file

#8494

djosain@gmail.com
Participant

Hello, i’m trying to do the same with wallander, i’m new to this also.

I’m copying the above code to try it bu i have no results.

I have in the same folder a csv file, jquery.js and canvasjs.min.js.

csv contens these:

2013,6330
2014,7058
2015,2088

My code that works fine is this:

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”UTF-8″>
<script type=”text/javascript”>

window.onload = function () {
var chart = new CanvasJS.Chart(“chartContainer”,
{
title:{
text: “ID”
},

axisX:{

labelAngle: 0,
labelWrap:true,
labelAutoFit: false,
labelFontSize: 15,
labelMaxWidth: 200,
labelFontColor: “black”
},

backgroundColor: “transparent”,
data: [

{
indexLabelPlacement: “outside”,
indexLabelFontWeight: “bold”,
indexLabelFontColor: “black”,

dataPoints: [
{ y: 6330, label: “ID-2013″, indexLabel:”6330”},
{ y: 7058, label: “ID-2014″, indexLabel:”7058”},
{ y: 2088, label: “ID-2015″, indexLabel:”2088″}
]
}
]
});

chart.render();
}
</script>
<script type=”text/javascript” src=”canvasjs.min.js”></script></head>
<body style=”background-color: #ADB68B; background-image:url(../Images/bg_body_new.png); background-repeat: repeat-x;text-align:center”>
<div id=”chartContainer” style=”height: 800px; width: 100%; background-image:url(‘fonto1.png’); background-repeat:no-repeat; background-position:center; background-size:100% 100%”>
</div>
<div style=”text-align: center; color:red; font-size:25px;”><b>Τελευταία Ενημέρωση 27 Μαρ 2015 12:00</b></div>

</body>
</html>

when i’m trying to combine it with yours i have no results:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<script type=”text/javascript”>

$(document).ready(function () {

$.ajax({
type: “GET”,
url:”data2.csv”,
dataType: “text”,
success: function(data) {processData(data);}
});

function processData(allText) {
var allLinesArray = allText.split(‘\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”,//theme1
title:{
text: “ID”
},
axisX:{

labelAngle: 0,
labelWrap:true,
labelAutoFit: false,
labelFontSize: 15,
labelMaxWidth: 200,
labelFontColor: “black”
},

data: [

{
indexLabelPlacement: “outside”,
indexLabelFontWeight: “bold”,
indexLabelFontColor: “black”,

data: [
{

type: “column”,
dataPoints: dataPoints
}
]
});

chart.render();
}
});
</script>

<script type=”text/javascript” src=”canvasjs.min.js”></script>
<script type=”text/javascript” src=”jquery.js”></script>
</head>

<body style=”background-color: #ADB68B; background-image:url(../Images/bg_body_new.png); background-repeat: repeat-x;text-align:center”>
<div id=”chartContainer”
style=”height: 800px;
width: 100%;
background-image:url(‘fonto1.png’);
background-repeat:no-repeat;
background-position:center;
background-size:100% 100%”>
</div>
<div style=”text-align: center; color:red; font-size:25px;”><b>Τελευταία Ενημέρωση 27 Μαρ 2015 12:00</b></div>

</body>
</html>

Thanks and Regards