Need help in making pie chart.

Question

I want to show a pie chart after form submission.I was able to take input and draw pie chart using div and onclick event attribute but I want to use form and onsubmit, how can I do that?
https://code.sololearn.com/WCtwSxj15wEL/?ref=app
https://code.sololearn.com/WF8Yq0RIRZ02/?ref=app

Answer 1

If you submit data, you need to handle reception on server side to be able to either serve those data (through AJAX request -- XMLHttpRequest) to the page wich handle the pie chart making with js or to dynamically build the page wich handle the pie chart by inserting the data as JS variables declaration/assignation of literals inside a <script> tag (alternatively, you could serve a static html page and only build a linked js script external file)...

However, if there's no real requirements for data transiting by server (if need to save them in a database for example), you'll better and simplest be advised to save your data in cookies and/or localStorage (according to the support needed), so you avoid the server side stuff ;)

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Answer 2

Mozilla Developer Network is a great ressources mine for all web development topics, from front-end (the core of the site) even to back end (maybe a few less complete than for front end, but we could found useful informations and tracks to dive deepers) ;)

Answer 3

you can't do that in sololearn

you need a backend to render the page based on user submission

Answer 4

event.preventDefault() to prevent the page from reload

https://code.sololearn.com/WDr75fz3dDfo/?ref=app

the remaining error (line 81) is error due to your library

Answer 5

Gordon
The code is showing an uncaught error, after submission

Answer 6

Gordon
Then what is the solution.
the library is plotting chart in 'pie-chart(using onclick)', but the chart is shown in the same page, I want that chart on another page, after submission, how can I do that

Answer 7

that's caused by your imported library.

Answer 8

For backend which language I need to learn?

Answer 9

Gordon visph
Thanks everyone, and the articles are really helpful.