1

I have written a simple python program that makes an api call to a webserver and and save received data in to a csv file.

this is the format of the saved csv file:

11:56:03/13/21,30,70,555.98,1270.41,1,2609
:
12:00:03/14/21,30,70,556.27,1270.35,2,2618
:
01:00:03/14/21,30,70,556.27,1270.35,3,2618
:
01:33:03/14/21,30,70,556.27,1270.35,44,2618
01:34:03/14/21,31,69,558.47,1270.33,12,2619
01:35:03/14/21,31,69,558.34,1270.33,15,2618
01:36:03/14/21,31,69,558.8,1270.33,42,2620
01:37:03/14/21,31,69,559.58,1270.33,472,2625
01:38:03/14/21,31,69,559.58,1270.41,471,2625
01:39:03/14/21,31,69,559.58,1270.41,4761,2625
01:40:03/14/21,31,69,559.58,1270.41,411,2625

this is just a small chunk of data from the file , the api call is being made every one minute and the received data is being saved into the csv file.

What i am trying to do now : i am trying to modify the below Javascript so that it will read only a certain column depending on the current day's timestamp from first column, from the csv file and then use these values as dataset to draw lines on the chart

Javascript:

<script>
var xValues = [1,2,3,4,5,6,7,8,9,10];

new Chart("myChart", {
  type: "line",
  data: {
    labels: xValues,
    datasets: [{ 
      data: [860,1140,1060,1060,1070,1110,1330,2210,7830,2478],
      borderColor: "red",
      fill: false
    }, { 
      data: [1600,1700,1700,1900,2000,2700,4000,5000,6000,7000],
      borderColor: "green",
      fill: false
    }]
  },
  options: {
    legend: {display: false}
  }
});
</script>

For Example: let say the day today is 03/14/21 so i want to read the values from 6th column only for current day with timestamp of 01:00 onwards so from above mentioned chunk of csv data i want only these values [44,12,15,42,472,471,4761,411] into the dataset

i have search everywhere trying to figure out how to do it but i couldnt find the solution to this problem

Sanders
  • 61
  • 7
  • Maybe this link helps you: https://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript – Bernhard Beatus Mar 14 '21 at 10:55
  • yeah i already looked at that solution , but unfortunately its a lot different than what i am looking for – Sanders Mar 14 '21 at 10:58

1 Answers1

0

Copied your data in a github repository to get rid of the CORS Problem.

$(document).ready(function() {
    $.ajax({
        type: "GET",
        url: "https://raw.githubusercontent.com/bmehler/mycsv/main/test.csv",
        dataType: "text",
        success: function(data) {
           processData(data);
        }
    })

    function processData(allText) {
        var allTextLines = allText.split(/\r\n|\n/);
        console.log('allTextLines', allTextLines);
        var length =  allTextLines.length;
        var splitted;
        var dataString = '';
        dataString += '[';
        for(var i = 0; i < length; i++) {
            splitted = allTextLines[i].split(/,/);
            console.log('splitted-' + i, splitted);
            $.each(splitted, function(key, value) {
                if(key == 5) {
                    console.log('test', value);
                    dataString += value + ',';
                }    
            });
        }
        dataString += ']';
        var replaced = dataString.replace(",]", "]");
        console.log('dataString', replaced);
    }
});

console.log: dataString [44,12,15,42,472,471,4761,411]

Bernhard Beatus
  • 1,191
  • 1
  • 5
  • 6
  • it throws the error --------->index.html:1 Access to XMLHttpRequest at 'file:///C:/Users/r/Desktop/myfile.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. – Sanders Mar 14 '21 at 11:52
  • but the problem is the csv file is being updated once every minute and its not very feasible to upload the file on the github again and again – Sanders Mar 14 '21 at 15:42
  • this was just for testing. You should us your updated csv file on a webserver with https. So just change the Url to your webdirectory. Anyway you have to check the data against your timestamp – Bernhard Beatus Mar 14 '21 at 15:45
  • i am actually using a windows vps to serve a page and this is going to be used on that vps, so i dont https might not be possible , and data stamp is not an issue , i can do that in python while saving the txt file – Sanders Mar 14 '21 at 15:54
  • so just use the path on your vps to the csv file and change the url of the ajax call. Thats it. Not a local file. – Bernhard Beatus Mar 14 '21 at 15:58