How to Create Website Graphs from CSV Files with c3.js and PapaParse
Vložit
- čas přidán 13. 09. 2024
- This video is meant to be a sort of in depth walk-through on my thought process as I create website graphs from CSV files, using two libraries. I create a line chart from a CSV file as an example.
Github source code:
github.com/huy...
c3.js:
c3js.org
PapaParse:
papaparse.com
Requirements
===========
The only requirement is: you need a web server.
I chose to use python to host the web server in the project.
I opened Cygwin Terminal. I checked if I had python on my computer.
python --version
Python 2.7.10
I changed directory into the project folder and started the python web server.
cd graphs-from-csv/
python -m SimpleHTTPServer
Then, I visit localhost:8000 to see the website.
Outro song: • Pokémon Gold & Silver ...
Twitter: / microwavesam
Awesome tutorial!! Can you also update on how we can load multiple CSV and view them individually from the webpage?
This is an excellent Web graphs building presentation, Thanks a lot!
i realize Im kinda randomly asking but does anyone know of a good site to stream new movies online?
@Wilder Misael Flixportal :)
@Juelz Zander Thanks, signed up and it seems like they got a lot of movies there =) I appreciate it!
@Wilder Misael happy to help :D
+MicrowaveSam i can to say only one thing: Thank you! :)
Excellent tutorial!!
Very good tutorial...Could you please make a video on "cross-filtering" in c3.js
thanks for this video.👍 I want to know is what can we do if our data is continuous and we want to display the recently updated values of some parameters or all values of some parameters of data in the graphical format?
Great approach to teaching!!!
How to convert website graph into excel file?
Thank you so much. It was of great help:)
well done man...well done
hello Huy Le. this is a great video tutorial. thank you so much. i have a question. which application are you using to write the code?
I'm using Sublime to open the HTML and JavaScript files. Sublime is just a note/text editor. If you open a HTML file with any Internet Browser, you can see your website.
www.sublimetext.com/
thank you for your reply. now i am facing another problem with Cygwin. when i try to run the command: pythin -m SimpleHTTPServer and hit enter, nothing is happening. what might be the issue? please help.
Hello, i successfully made the graph. now my task is to get the data which in on x axis and display it on y axis and vice versa. i tried to change the names but it not showing the result as expected. what should i do?
if you're using python 3.x it's http.server
Great video. Thanks
I want to use mysql datas for generating charts in HTML page. not PHP. Urgent please. I can show mysql data in html table, but not convert to chart.
Thank you so much.
великолепно!спасибо
Hi - this is awesome. It works perfectly on local server but when i upload your GitHub to my linux website, i get unexpected token '
I am running into an issue. My data file is reversed, my labels run along row 1 and my data runs below that. How do I modify the push to read the array as I mentioned? (for your example, the years would run on row 1 and the data for those rows would be in the columns)
Any one was successful to add a file selection button, how can i do that in html file or in the js file
Thank You
I wish I had a Million Dollars. Coz I need to give it to you :) Thanks Loads!
How to plot nested java
Nice voice. Nice explaining
how do you make multiple graphs with this code, without overwriting the other?
really good video, even though i dont need it, lol
It's strange that once I change a number in spanish-silver.csv, then I got error messages like "Uncaught Error: Source data is missing a component at (0,82) .... at XMLHttpRequest. (papaparse.min.js:6)"
Oh, I figured it out. The csv file should not have a new line char at the end of file for papaparse to work.
I have the same problem. What do you mean by "new line char at the end of file" ? Thanks.
Tell me more about how you solved this problem.
can i use it with xampp?
more stuff on Nintendo maybe other than that your videos are legendary
thanks so much!!!
I'm encountering some challenges with c3-master. I keep getting this error message "Uncaught SyntaxError: Cannot use import "import * d3 from 'd3' " statement outside a module"
how do I solve this please .
Nevermind solved the issue
how we can display more the one graph in a single page? I tried already with 2 ID, but the last script only executing
in html add two div where you want to create graph with two different id and in .js file create two graphs within same function and add id of div to the bindto of the respective graph you want to add to the particular div.
Why using Python when we can use Mamp and test on localhost
How do you install c3.js on centos 7?
Hi, is it possible to have multiple charts in one page? where to edit?
Thanks :)
You mean like multiple y graphs?
Sure.
Just add as many as you like.
data: {
columns: [
silverMinted,
situadospaid
]
},
Like your videos and not to get all grammar Nazi on you, but it's "bound" not "binded."