How to Create Website Graphs from CSV Files with c3.js and PapaParse

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/huyle333/graphs-fr...
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

[@mrunalidhenge980]

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?

[@manuk.s.1836]

Awesome tutorial!! Can you also update on how we can load multiple CSV and view them individually from the webpage?

[@mohammedal-mudhafar4602]

This is an excellent Web graphs building presentation, Thanks a lot!

[@wildermisael8502]

i realize Im kinda randomly asking but does anyone know of a good site to stream new movies online?

[@juelzzander7687]

@Wilder Misael Flixportal :)

[@wildermisael8502]

@Juelz Zander Thanks, signed up and it seems like they got a lot of movies there =) I appreciate it!

[@juelzzander7687]

@Wilder Misael happy to help :D

[@wei48221]

Excellent tutorial!!

[@lucasatilano8008]

Great approach to teaching!!!

[@sujitkumarsaha770]

Thank you so much. It was of great help:)

[@isus8423]

well done man...well done

[@OliverMolnar]

+MicrowaveSam i can to say only one thing: Thank you! :)

[@Kumar-zg7pm]

Very good tutorial...Could you please make a video on "cross-filtering" in c3.js

[@andy.carter]

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)

[@moonanaii]

how do you make multiple graphs with this code, without overwriting the other?

[@grinspike]

Nice voice. Nice explaining

[@starrebornalpha]

How do you install c3.js on centos 7?

[@marcc2689]

Great video. Thanks

[@nusgra8063]

Hi - this is awesome. It works perfectly on local server but when i upload your GitHub to my linux website, i get unexpected token '

[@MsPrashant55]

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?

[@MicrowaveSam]

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/

[@MsPrashant55]

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.

[@MsPrashant55]

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?

[@snorlax42069]

if you're using python 3.x it's http.server

[@anishckumar]

how we can display more the one graph in a single page? I tried already with 2 ID, but the last script only executing

[@mrunalidhenge980]

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.

[@knowledgesharing4574]

How to convert website graph into excel file?

[@classicryda120908]

Hi, is it possible to have multiple charts in one page? where to edit? Thanks :)

[@BolverBlitz]

You mean like multiple y graphs? Sure. Just add as many as you like. data: { columns: [ silverMinted, situadospaid ] },

[@danishasim5037]

can i use it with xampp?

[@samuelcarvajal7543]

more stuff on Nintendo maybe other than that your videos are legendary

[@bassemhassan1263]

Any one was successful to add a file selection button, how can i do that in html file or in the js file

[@SaikatSinha_me]

Thank You

[@nirliptgaur]

I wish I had a Million Dollars. Coz I need to give it to you :) Thanks Loads!

[@1raskumar]

великолепно!спасибо

[@PeipeiZhou]

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)"

[@PeipeiZhou]

Oh, I figured it out. The csv file should not have a new line char at the end of file for papaparse to work.

[@saxkMr]

I have the same problem. What do you mean by "new line char at the end of file" ? Thanks.

[@axenov048]

Tell me more about how you solved this problem.

[@kiwhatkioracing]

thanks so much!!!

[@PIDOtomasyon]

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.

[@robotinthebrain]

Why using Python when we can use Mamp and test on localhost

[@TheNini666]

really good video, even though i dont need it, lol

[@shrutirajpoot6310]

How to plot nested java

[@asamoahduah4591]

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 .

[@asamoahduah4591]

Nevermind solved the issue

[@K0nc3pt10n]

Like your videos and not to get all grammar Nazi on you, but it's "bound" not "binded."