Simple Bar Graph

There are a plethora of frameworks one can use to produce amazing responsive interactions on your website. It would seem like generating basic Javascript and html to make a graph is almost useless; however, I decided to do just that today.

I was determined not to search out any tutorials and limited my searches to basic information I wanted to find out. Certainly, there are other, possibly better, methods to creating an interactive graph which work on more devices with a more responsive design, but I made one in jsfiddle that works.

There is room for plenty of styling, and, depending on one's browser size, the bars sometimes fall off the bottom of my drawing board. One has an option for any number of sliders, although I limit the standard options to five. The code merely works on for loops to build up the majority of the webpage.

The most interesting part of the code was figuring out how to build the sliders so that they could call a function to change the width of each bar. I ended up using the following (quite messy) line to accomplish this:

var node = "Bar "+i+": <input type='range' name='bar"+i+"' value = '50' onchange='updateBars(this.value,"+i+");'><br>";

The other interesting tidbit of code was the lengthy bit I used to initialize the bars. I wanted to keep the spacing even based on the number of bars and managed to accomplish that through a lengthy bit of styling.