Mods please delete if this isn’t allowed. I’ve been looking everywhere to see how I could possibly make a workout graph for a site I am trying to create but have not been able to find anything that will work.

These workouts would be for running, cycling, swimming, etc and the intervals within them. I have tried the approach of a bar graph, but it seems like the width of the bars are almost always the same width. What might be the best strategy to create something like this within the browser? Angular or Vanilla JS, or a framework/package of some other type would be preferred but I am completely willing and ready to learn anything else to make something like this.

At this link is a pretty good example of what I’m trying to do where I can select workout intensity and duration and it is displayed in the browser. Does anyone have any ideas of how this is created or what I can work on to try and make something similar myself? (note: I am not at all trying to copy this site. This site is for building workouts for a virtual cycling platform. I am trying to make workouts for the sake of viewing the intensities over time , but this has a simple free creator to show.)

Here’s an image from a different workout creation site:

Post image

So far I poked around at Google Charts and ChartJS but it seems like neither of these will have the functionality of something like this. Going to a more traditional approach, I imagine this could be done with html canvas. Am I on the right track?

Source link

Write A Comment