Displaying size adjusted buttons on specific points on a line in HTML/CSS
You don't need a library or any other craziness. You just need to set a few base styles and then modify the position & width properties via Javascript.
I would set it up like this:
You need the HTML to match your data layout so let's use those classes. Then we'll use CSS to create alignment and javascript to put everything in the right place. I'd also suggest calculating a percentage so you can have any width line (parent).
let data = {
'one': {
'left' : 0,
'width' : 20
},
'two': {
'left' : 25,
'width' : 5
},
'three': {
'left' : 35,
'width' : 40
},
'four': {
'left' : 80,
'width' : 5
}
}
var parentEl = document.getElementById('parent');
Object.entries(data).forEach((item,i) => {
let props = item[1]
let el = parentEl.getElementsByTagName("button")[i]
// These are percents in the data if they're px you need to convert
// startX/parentWidth * 100 & childW/ParentW * 100
el.style.left = props.left + '%'
el.style.width = props.width + '%'
});#parent {
/* give the absolute position an anchor */
position: relative;
/* margin to make it easier to see */
margin: 50px 10px;
width: 100%;
height: 1px;
background-color: tan;
}
.child {
/* position it relative to the line */
position: absolute;
padding: 0;
margin: 0;
min-width: 1px;
/* bring the top above the line */
top: -50%;
transform: translateY(-50%);
/*
now all the buttons are stacked at the left
we'll change that position with javascirpt.
*/
}<div id="parent">
<button class="child">1</button>
<button class="child">2</button>
<button class="child">3</button>
<button class="child">4</button>
</div>This can be done in pure CSS. The trick is to use CSS variables and calc() function to dynamically calculate width and starting position as % of a whole graph. This makes the graph responsive.
How does it work
A graph is build with a single hr element and variable number of child nodes. Nodes are positioned absolutely inside the graph element. Length and position of a node is computed using calc() function.
Graph length is set with --graph-length variable.
Nodes have two variables --start and --end.
Width of a node is calculated with:
calc((var(--end) - var(--start)) / var(--graph-length) * 100%)
and its starting position with:
calc(var(--start) / var(--graph-length) * 100%)
Inside Django template substitute hardcoded values with values from dictionary. If you can create a list of children in dictionary like this:
graph = {'entry': {'length': 10000, 'children': [{'child': {'start': 1, 'end': 1000}}, {'child': {'start': 2000, 'end': 6000}}]}}
then generating graph inside Django template will be simple as:
<div class="graph" style="--graph-length: {{ entry.length }};">
<hr class="line">
{% for node in entry.children %}
<span class="node" style="--start: {{ node.child.start }}; --end: {{ node.child.end }};"></span>
{% endfor %}
</div>
.graph {
position: relative;
}
.node {
position: absolute;
top: 0;
width: calc((var(--end) - var(--start)) / var(--graph-length) * 100%);
left: calc(var(--start) / var(--graph-length) * 100%);
height: 1em;
background-color: cornflowerblue;
display: block;
border: 1px solid gray;
border-radius: 3px;
}
.line {
position: absolute;
left: 0;
right: 0;
height: 0px;
}<div class="graph" style="--graph-length: 10000;">
<hr class="line">
<span class="node" style="--start: 1; --end: 250;"></span>
<span class="node" style="--start: 400; --end: 800;"></span>
<span class="node" style="--start: 1500; --end: 3500;"></span>
<span class="node" style="--start: 6000; --end: 8000;"></span>
<span class="node" style="--start: 9500; --end: 10000;"></span>
</div>
<br>
<br>
<div class="graph" style="--graph-length: 10000;">
<hr class="line">
<span class="node" style="--start: 1; --end: 150;"></span>
<span class="node" style="--start: 500; --end: 850;"></span>
<span class="node" style="--start: 1200; --end: 2500;"></span>
<span class="node" style="--start: 3000; --end: 3200;"></span>
<span class="node" style="--start: 5000; --end: 6000;"></span>
<span class="node" style="--start: 6500; --end: 7500;"></span>
<span class="node" style="--start: 8500; --end: 9000;"></span>
</div>
<br>
<br>
<div class="graph" style="--graph-length: 1000;">
<hr class="line">
<span class="node" style="--start: 1; --end: 100;"></span>
<span class="node" style="--start: 300; --end: 500;"></span>
<span class="node" style="--start: 650; --end: 750;"></span>
<span class="node" style="--start: 900; --end: 950;"></span>
</div>