how to draw lines with svg or using html div - html

Question

I have created an app in which instead of filling form manually on paper user can generate a request for creating email of the organisation domain through app. The user can fill the form and the form will be sent to HR department and than after approval of HR department the form will be sent to IT department and after the approval of IT manager the email will be created by IT staff. I want to give the rights for the user to see and check the status of his/her request wether it is in HR approval process or in IT approval process. All he has to do is search by ID which I will provide him on submitting the form. I attached the pic what I really want you can see. Explanation: when user search and track his request I want to show the status through flag . I mean if if is in HR process than the flag will be shown on HR . Same for IT. I have checks for all approval in my database . Like I have properties HR approval , IT approval . In my table . What I need here I don't know any Api or JS library which can provide this type of visuals. How can i achieve this. I am using .net mvc Sql and entity framework as my core technologies.
I used svg line to create that line on x-axis but it is not fulfilling my requirements , whats wrong with the code . or is there any other good way to create it ?
<svg height="210" width="500" xmlns="http://www.w3.org/2000/svg" version="1.1">
<line x1="40" x2="120" y1="100" y2="100" stroke="black" stroke-width="20" stroke-linecap="round"/>
</svg>
I would appreciate if someone guide with code snippet.
I tried in this way too but it is not working either
<div style="width:auto ; margin-left:5%" class="col-md-2">
IT
</div>
<div style="width:auto ; margin-left:5%" class="col-md-2">
HR
<div>
<img src="~/Content/148878.png" />
</div>
</div>
<div style="width:auto ; margin-left:5%" class="col-md-2">
VP
</div>
<div style="width:auto ; margin-left:5%" class="col-md-2">
FH
</div>
<div style="width:auto; margin-left:5% " class="col-md-2">
SR
</div>
<div style="width:auto ; margin-left:5%" class="col-md-2">
FH
</div>
</div>

Answer 1

Have you considered using a canvas instead? HTML Canvases can be easily controlled from JS and they can easily load images. You can load images and text as well, so you could easily load the image of the line, the text for the title (although that could be an image as well), and load the image of the flag wherever it needs to be. It would take very little code and very little canvas experience as well. A few google searches could tell you everything you need to know. You can find a lot of tutorials for this in the canvas tutorial at https://www.w3schools.com/graphics/default.asp
If you have any questions about using canvas that aren't answered by the tutorial, they will most likely have answers here on stack overflow.
I have attached snippet. The canvas seems a little blurry in the snippet, but you should not have this issue on an actual webpage. I also left some comments that could be very helpful in the snippet. I still urge you to visit the canvas tutorial I linked to if you decide to use a canvas. It is extremely helpful, and everything written in the snippet could be much better learned in just a few minutes in the tutorial.
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// Draw your title. You may use text or load an image.
ctx.font = "15px Arial";
let text = "Email Request Process Live Tracking";
ctx.fillStyle = "#0000ff";
ctx.fillText(text,canvas.width/2 - ctx.measureText(text).width/2,20);
/* Draw the progress bar. You would probably want to use an image here
but I do not have the image, so I am drawing a gray rectangle
as a placeholder. */
ctx.fillStyle = "#a2a2a2";
let startX = 40;
let startY = canvas.height - 50;
let width = canvas.width - 80;
let height = 10;
ctx.fillRect(startX, startY, width, height);
/* Place the flag somewhere along the progress bar. I am keeping track
of the coordinates for specific positions on the bar in a JSON object
so that you only have to change the variable "progress" to change the
position. Try it out. For this you will probably want to use an image.*/
var progress = "it";
let locations = {
function: {x: startX, y: startY},
hr: {x: startX + width/5, y: startY},
it: {x: startX + 2 * (width/5), y: startY},
processed: {x: startX + 3 * (width/5), y: startY},
actionPerformed: {x: startX + 4 * (width/5), y: startY},
handedoverClosed: {x: startX + width, y: startY}
};
let img = new Image;
/* I got this image off of google images. In reality, you'll probably
want to upload your own flag image and use that instead.*/
img.src = "https://static.goshopping.dk/products/300/kay-bojesen-flag-til-garder-39021-6382-1.jpg";
let x = locations[progress].x
let y = locations[progress].y
ctx.drawImage(img, locations[progress].x, locations[progress].y - 40, 20, 40)
}
#myCanvas {
border:1px solid #d3d3d3;
width:100%;
height:100%;
}
#invis {
display:none
}
<canvas id="myCanvas"></canvas>
<!–– Normally you would not have to load this image in, but I code snippet fails to load the image in the canvas without it for whatever reason. Because it is uneccessary and should not be displayed, I've set its display to none to stop it from being rendered.-->
<img src="https://static.goshopping.dk/products/300/kay-bojesen-flag-til-garder-39021-6382-1.jpg" id="invis">