Recently I needed to create an application with a stacked bar graph in order to represent chunks of time (each bar is a length of time).

I tried both mooBarGraph and JqBarGraph and with both, I had the issue of stuff appearing that I didn’t need or want (values on each bar, titles, axis, etc.).  They’re both awesome tools, but I found JqBarGraph much easier to work with for altering the code to do what I want (which really, is hacking together a type of progress bar using a stacked bar graph).

Modifications:

• Added parameter graphTotalValue: true|false to show / hide the total value of the graph that is automatically generated up top (not shown in pic on the left)
• Assigned individual numbered ids to each bar.  JqBarGraph calls each of these bars (pink, white, navy, etc. in the pic on the left) subBars, and are of class subBars{{name of div containing graph}}.  So for example, I named the div containing my graph <div id=”progress_bar”> which means each of these subBars are of class .subBarsprogress_bar, and i gave each of them id’s in the format subBars{{name of div containing graph}}#, meaning each of the subBars are of id #subBarsprogress_bar1, #subBarsprogress_bar2, etc. (only difference is the number on the end).  This means that you can get the coordinates of each subBar using document.getElementById(‘subBars{{name of div containing graph}}’ + {{id # of the subBar you want to access}}).offsetTop method if you need to do something like have an arrow point at that specific subBar (shown in pic on the left).

The modifications I made are quite minute and I give full credit to author Radovan Svedic.

The modified js file can be found in the project’s codebank here.