javascript - How to create a dynamic graph for websites?

Question

Hello,

I'm relatively new to the programming world and I was wondering how I would go about creating the following for a website I'm designing. I will use a random example as to not give my application away, but the process should be the same. I apologize ahead of time for the unrealistic values:

Say a civil engineer wants to come onto my website and figure out the mechanical stress at certain points on the Eiffel tower, lets say on the corner of the first/second observation deck (see Image). To make this more general, they want to vary values such as the height and base width of the tower to see how that affects the mechanical stress at those points.

Now, I can make the algorithm for calculating those stress values. My question is, how would a programmer go about creating this dynamic figure, such that the 'stress values' are shown on the image at distinct locations, and they change based off of the values of the user inputs + algorithm? My thoughts are the following:

• Use HTML/CSS to place the images and design the webpage
• Use JavaScript to take inputs, run the algorithm and calculate outputs. This would also make the dynamic changes on the image.

I have zero experience with JavaScript (I'm okay with HTML/CSS as I have built my own website before). I guess I'm hoping to be pointed in the right direction before I go off and start learning the wrong language for this application.

Bonus Challenge

While they're doing this, it would be nice to see a visual representation of the Eiffel tower change when the height and base area are changed. ie if you make the base way wider and the height much shorter, the bending in the midsection is going to be much more apparent. Obviously, this means I wouldn't be using a picture, but actually a vector-image model of the Eiffel tower that would change based off of the inputs. So what language and what libraries would one use to go about making this sort of things?

Thank you to anyone that can provide some insight on my issue. I really appreciate it!

Mike

Answer 1

Hello to integrate dynamic graph in a webpage there are two ways;

First you need to make your own graph library. For that you need to know SVG well to make a good looking graph.

Second, you can use any existing library. There are lot of open source libraries are there some of them are free to use also. To integrate graph using those libraries is not much difficult.

Some examples of graph generating library morris chart, c3.js etc. Google search 'll give you more detail idea.

As you said you have no idea about javascript so it will be a bit difficult at first for integrating graph. But 'll definitely much more easy to make your own graph library.