Updating a chart from local CSV file

[jwk]

I am trying to get my canvasjs column chart to update from a local csv file. (foobar.csv)

I got the column graph to work. See https://chem2.uaf.edu/facilities/Test/csvtest.htm
but a version containing an updateChart() section fails. See https://chem2.uaf.edu/facilities/Test/csvtest-update.htm

I tried to copy the json updateChart() format, but this is not working.

So: How do I code the updateChart() section properly retrieve data from a csv file that might contain changing data?

[Vishwas R]

@jwk,

Can you please check browser console for error Uncaught SyntaxError: Unexpected token ) - csvtest-update.htm:72. It seems like there is some mismatch of brackets in your code.

If you are facing any other issue, kindly create jsfiddle or share static html/php files over onedrive/google-drive so that we can understand your code better and help you out?

—
Vishwas R
Team CanvasJS

[jwk]

I attempted to correct the browser error by removing the “)”, but that just gave a different browser error…

The csvtest.htm:
https://drive.google.com/file/d/15zaOAP9pWG1RJGBdoj_f0MCpQ-PwhHH9/view?usp=sharing

The csvtest-update.htm:
https://drive.google.com/file/d/1qVUNu2pAjbymVej0WciVBaHCeMYImdYD/view?usp=sharing

The foobar.csv :
https://drive.google.com/file/d/1f6D_yexayCKpihbKKNTtvCZSakZIwnCY/view?usp=sharing

[jwk]

Sorry, the hyperlinks for the 2nd and 3rd should be switched.

[Vishwas R]

@jwk,

You have missed out closing window.onload function because of which its throwing error – please check browser-console. Also we would suggest you to instantiate chart once and update dataPoints on every ajax-request instead of creating new chart on every ajax-request. Please download the updated code and let us know your feedback.

—
Vishwas R
Team CanvasJS

[jwk]

Hi Team,
Thank you for the suggested changes to the CVS updating chart! It is now updating. However, the number of columns increases by 4 (which is the number of rows in the CVS file) after each timeout interval..

Perhaps the new dataPoints should overwrite the old dataPoints?

John

[jwk]

I created a jsfiddle page for this code:

https://jsfiddle.net/jwkeller/yy3hdLtz/

[jwk]

Another problem with the suggested code ( https://jsfiddle.net/jwkeller/yy3hdLtz/ ) is that, even at time=0, TWO copies of the CSV file data are plotted.

[jwk]

OK I fixed it. See the above jsfiddle page. All I did was modify the updateChart function with some lines that removed the previous dataPoints using a dataPoints.shift statement.

Once I have this webpage fully functional, I will update this forum with the URL so you can see it in action in the “real world”.

[Vishwas R]

@jwk,

Glad that you fixed the issue :)

—
Vishwas R
Team CanvasJS

[jwk]

OK it seems to be working. https://chem2.uaf.edu/facilities/WebMO/

Much of the time these servers are not being used. However, anyone can send in a job by logging on as Guest, pwd webmo

Do New Job, Create New Job, Lookup-Import-By Name, tetracyclin, OK.
Click the right arrow (bottom right), choose NWChem (a quantum chemistry package), right-arrow,choose geometry optimization and all the other as defaults, click the advanced tab, change 2 to 8 under Cores, submit the job by clicking the right arrow.

The bar graph should register under Rosewill.