My professor has tasked us with creating a web app that generates a bar, pie, and line chart using only javascript and SVG. No third-party packages or libraries are allowed. I've been stuck on this for weeks and can't seem to figure it out.
Here is a good example of what I am trying to create http://nasir9bd.github.io/generate-chartjs/ the author uses jquery and chartjs, which I am not allowed to use.
If anyone can point me to a tutorial on how to create this using only javascript and SVG? please I am going mad! I've tried coding it myself and only got so far. I've tried tutorials, but all only use libraries or other languages.
I learned from Mozilla tutorial. . You have to be patient reading from scratch,
First, learn the 2D position of the shape (x,y)
Second, learn the basic shapes (Rectangle, Circle, Ellipse, Line, Polyline, Polygon, Path).
Third, customize and decorate these shapes with Fill, Stroke and Gradients.
Examples:
<svg> element with <rec> elements inside it.<svg> element with <path> elements inside.<svg> element with an <polyline> element inside.Try to read the basic shapes section, do the examples, you'll get 50% of the idea. Good luck!