0

I am trying to load a set of accelerometer data into my vue js app so that I can plot the x and y coordinate points onto a graph. I started out by loading the data like this

import Acc from "../TEST_DATA/acc";

I got the error

ERROR in ./TEST_DATA/acc.json
Module build failed: Error: ENOENT: no such file or directory, open '/mnt/c/Users/brenn/OneDrive/Desktop/Folders/code/Floormap-app/floormap/TEST_DATA/acc.json'
 @ ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 14:0-35
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

DATA FORMAT

{"time":"2020-09-01 13:43:52","acc":[0.084869384765625,2.9331207275390625,9.295639038085938]}
{"time":"2020-09-01 13:43:52","acc":[0.4720611572265625,2.5552520751953125,9.557861328125]}
{"time":"2020-09-01 13:43:52","acc":[0.443389892578125,2.306732177734375,9.475082397460938]}
{"time":"2020-09-01 13:43:52","acc":[0.5052337646484375,2.26214599609375,9.519134521484375]}
{"time":"2020-09-01 13:43:53","acc":[0.5268402099609375,2.266632080078125,9.568099975585938]}
{"time":"2020-09-01 13:43:53","acc":[0.3914947509765625,2.3137359619140625,9.50543212890625]}
{"time":"2020-09-01 13:43:53","acc":[0.4478302001953125,2.31158447265625,9.463180541992188]}
{"time":"2020-09-01 13:43:53","acc":[0.4195709228515625,2.37359619140625,9.527877807617188]}

Where the "time" can be ignored for how and the

"mag":[X-coordinate, y-coordinate, z-coordinate]

This then made me realize that the data needs to come in a .json or .csv format instead of .txt. However the acc.txt file does not contain comma-separated values or the proper json format. The file sizes are quite large and I can not insert a comma between 1000-50000 data points everytime the data updates. Would it be possible to run the code through some sort of online converter or create a reformat function in my program? If so if someone could point me in the right direction that would be awsome. Thank you for any help.

brennan
  • 185
  • 1
  • 11
  • I'd be more worried about loading such a large data set into browser memory. Also, this data would only be loaded once as part of your bundle which would be huge due to this. Do you expect to deploy a new bundle every time the data changes? – Phil Sep 16 '20 at 03:30
  • @Phil currently I just need to be able to plot the data points and and connect the dots but eventually I think I will need to do that. – brennan Sep 16 '20 at 04:13

1 Answers1

1

I think it would be better to reformat your data before serving it to your app .

1 - Reformat your data into JSON

create a script.js file that later you will execute with node script.js . Basically your script need to do a find a replace in a file like replace } by }, and add a [ at the begining and a ] at the end. There some good node libraries to do that : Replace a string in a file with nodejs.

2 - (optional) cherry pick only what you need.

Now that you have a valid .json, you can parse it and reformat your data as you like. You can do that as a 2nd step in the same script, thus your final file will be lighter

3 - loading the JSON

There is 2 options here:

  • as you did with import Acc from "../TEST_DATA/acc.json"; with the inconvenience of a big final bundle and the need to redeploy for each data change.
  • Load it with an ajax request. A bit more coding but more manageable in the end.

PS: I'm not too worried about an array of 50000 entries, the difficult part is to display those 50000 points X)

jeremy castelli
  • 1,232
  • 10
  • 26