Home › Forums › Chart Support › Graph a CSV file › Reply To: Graph a CSV file
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:{
data: [
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>
Thanks and Regards