Newbie plotting problem

• August 8, 2015 at 1:53 pm #9217
  
  pawcuq

  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

  August 14, 2015 at 12:13 pm #9232
  
  Naveen Venugopal

  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();
  	});
  	
   }

  August 14, 2015 at 6:53 pm #9238
  
  pawcuq

  Thanks for your help, now everything works as it should ;)