You must be logged in to post your query.
Home › Forums › Chart Support › Newbie plotting problem
Tagged: #linegraph #problem #newbie
Hello.
Firstly I have to say that I’m quite new to JavaScript, HTML etc. I need to make a simple website with line graph and CanvasJS looks like perfect fit for me. I have CSV file with data (first column has X data and second column has Y data) which I’d like to plot. I think that I load up data correctly, but when I want to plot – there are axis visible but data is not plotted. Strange is that when debugging with Firebug, when I go through all functions – at the end points are plotted… What am I doing wrong? :/
Here’s files which I use – https://www.dropbox.com/sh/krl7ywq8j0iylw2/AABfgPaSbkQ45EwmAmbbKRaMa?dl=0
Hi,
We just looked into your code and found a minor issue. XMLHttpRequest is a asynchronous by default because of which data is not available when prepare() method is called.
You can fix the issue by making XMLHttpRequest synchronous as shown below.
rawFile.open("GET", "s.csv", false);
Alternate way using Asynchronous XMLHttpRequest Though the previous solution would work, it is generally not a good idea to use synchronous requests. Below is another example where we use async request. I’ve basically modified your code to call prepare data inside a call back function and it works fine.
var xx = []; var yy = []; var data = []; var dataDiv = null; function readTextFile(callback) { var allText; var rawFile = new XMLHttpRequest(); rawFile.open("GET", "s.csv", true); rawFile.onreadystatechange = function () { if(rawFile.readyState === 4) { if(rawFile.status === 200 || rawFile.status == 0) { allText = rawFile.responseText; allText = allText.replace(/(?:\r\n|\r|\n)/g, ';'); allText = allText.split(';'); var iS = 0; var jS = 0; for (i = 0; i < allText.length; i++) { if(i%2 == 0) { xx[iS] = Number(allText[i]); iS++; } else { yy[jS] = Number(allText[i]); jS++; } } } callback(); } }; rawFile.send(null); } function prepare() { var limit = 10; //var y = 0; var dataSeries = { type: "line" }; var dataPoints = []; for (var i = 0; i <= limit; i++) { dataPoints.push({ x: xx[i], y: yy[i] }); } dataSeries.dataPoints = dataPoints; data.push(dataSeries); } function plotChart() { if(!dataDiv) { dataDiv = document.getElementById('myDiv'); var chart = new CanvasJS.Chart("chartContainer", { zoomEnabled: true, animationEnabled: true, title:{ text: "test" }, axisX :{ labelAngle: -30 }, axisY :{ includeZero:true }, data: data }); } readTextFile(function(){ dataDiv.innerHTML = yy[0]-yy[1]; data.length = 0; prepare(); chart.render(); }); }
Thanks for your help, now everything works as it should ;)
You must be logged in to reply to this topic. Login/Register