Vertical Progress Bar with milestones - javascript

I'm trying to make something like this:
I need to be able to pass in how high the bar should fill up (ie the percentage full I'd like it to be).
Vuetify offers lots of horizontal progress bars (seen here https://vuetifyjs.com/en/components/progress-linear/) but I can't find any vertical ones. I was thinking if I could rotate one of the horizontal ones then I could add circles that fill up when each milestone is hit. So is there any way of rotating a horizontal progress bar or is there another simpler solution to this using HTML, CSS and JS?

Related

how to delete empty space on chartJs canvas

I am trying to create small horizontal bars with chartJS 2.9.4 and it happens that it has a lot of empty space on top and bottom of the bars. Is there a way to get rid of that?
I want to make the entire chart equal to the height of the bars, knowing that the height is static.

smoothly animated javascript stacked progress bars without flickering

What is a good way of getting stacked progress bars to animate smoothly without flickering?
I'm currently using Bootstrap, changing the width styles (using Knockout).
Example: https://jsbin.com/lewuzewupo/2/edit?html,console,output
My problem is, if you watch that long enough, the green bar on the right flickers. This is seemingly because the animations cause it to get pushed to the right when the middle dark blue bar appears and disappears.
(I have tried everything I can think of to ensure that at no point in time do the total of the stacked bars exceed 100. If I stop using the progress-bar class and use my own that results in a similar look, but with no animation, then there is zero flickering and the bars are stable, always totalling 100.)
So is there a workaround for the problem in Bootstrap, or an alternative way of creating stacked progress bars that look as nice as the Bootstrap ones and animate smoothly?
[edit: added debugging to prove my percentages always total 100]
I think I've come across this kind of thing before - it's down to the 'complete' text. Basically it's not working out the widths quite right. 2 ideas.
Remove the 'complete' text and it should be ok.
Attempt to only display complete after a certain time and the values have dropped to a particular ratio.
Sorry can't be of more help.

Create a Circular Progress Bar with percentage number following

Do you know how to create a circular progress bar via javascript/CSS/HTML?
Thanks.
http://www.jqueryscript.net/loading/Customizable-Radial-Progress-Bar-Plugin-With-jQuery.html try this
include both jQuery library and the jQuery radial progress bar plugin
Render a default radial progress bar.
Render a bar chart like progress bar. Multiple radial progress bars layered on top and offsetted by each other. Values are visible in the center as a list. Data is loaded in initialization

d3js: zooming to a display bigger than svg size

I have gone through a lot of examples, but just could not find what I am looking for. I have a chart which has 54 little bar charts in it. I want to implement following zooming features:
1) By default, the chart is displayed in a svg container of size 400x400. On clicking the background of the svg container, the whole chart redraws/pops out itself to a bigger display, say 800x800, but without disturbing the other elements in the html page.
2) Each little bar chart has a separate container for itself in the svg. On clicking the bar chart, just that chart expands/pops out in a bigger display while rest of the chart is still of the same size.
How can these two features be implemented ??
Thanks in advance !
I think what you're describing is a modal div (or dialog) on top of your current page. If so, you'll need two copies of your charts. One is the original (400x400) and the other is the modal popover (800x800). Since the popover is a completely separate SVG, it can be zoomed differently (showing all 54 little bar charts or one bar chart).
Popover
The popover should be clipped so, if you're zooming to show one bar chart, the others will not be visible. You can refine it so when one bar chart is clicked, the popover only draws one bar chart at a time.
The popover can be a simple div with a high z-order or a dialog. Here's a jQuery dialog. There are many.
Click handlers
You also need click handlers on each chart group the the main SVG group. Alternatively, you could have one click handler for all the bar charts and calculate when you are over the background or an individual bar chart.
g.on('click' , function(d){ ...do the zoom... });

Background Image in an Image Map

I am trying to make a user generated nav bar.
This nav bar because it is dynamically created may have more tabs on it than the width of the nav bar.
That being the case, I would like to make it so that the nav will scroll from left to right.
Currently I use an image mapping technique where I plot coordinates on an image and move divs based on position which calculates speed and direction of movement.
The problem is background images may not have image maps applied to them. The general workaround is to create invisible divs on top that would represent my coordinates, but since my text would be there, and I don't want to mess with a z-index at all, that option is deprecated.
Any ideas how to do this any other way?
Here it is.
http://valums.com/scroll-menu-jquery/

Categories