Question
Oliver Wilms · Jun 3, 2020

Dashboard - how to draw lines?

Hello,

I work on a dashboard. I understand basic html. I like to draw two boxes in different colors on the background. There will be multiple small boxes inside or over the boxes in the background. I defined the large boxes as <div> and the smaller boxes also as <div> inside the larger <div>. So far so good.

How can I draw lines with arrows between the smaller boxes?

Each small box represents a process that gets a number in a circle and a status indicator: green = okay, red = not okay. If there is a problem with one of the smaller boxes, dashboard user should be able to click and drill down to get more info.

The csp page I work on can be found here: https://github.com/oliverwilms/irismonitor

I welcome any help

 

00
0 9 143 3

Replies

This post is not really about the monitoring metrics, it is about trying to achieve certain look on the front end display.

Hi @Oliver Wilms 

I think it would be better for us to understand and try to help you if you provide a kind of sketch of your idea.  

I have uploaded part of the block diagram our boss likes a lot because he can see messages flow (arrows), message types (lines), and points of contact (on the right) on one page. The green check marks indicate everything is okay. If something goes wrong, the numbers refer to the points of contact on the right so support knows who to contact. I envision there will be drill down to more details. I do not want to represent the diagram pixel by pixel, but I look for ways to draw lines and arrows.

Hi @Oliver Wilms 

One of your approaches could be to simplify your diagram to create blocks using divs and make it easier to understand and show what you want in a more straightforward way, using CSS and simple javascript/jQuery.

The other one can be using different libraries that give to you power to create any diagram you want laugh

I found a few libraries that could be useful in your journey. 

https://modeling-languages.com/javascript-drawing-libraries-diagrams/

One of them that calls my attention was:

https://gojs.net/latest/samples/index.html

Hope that helps

Best Regards,
Henrique  

Hello,

I hesitate to use any libraries as I work for Department of Veterans Affairs and they are very picky what is allowed. I see that Ens Portal Production Configuration has dot indicators for status green is okay or red is error and it also draws lines between connected components.

It is SVG. I was able to draw rectangles, circles, and lines. The code creates rect elements for boxes and text elements for text. My question is how can I force text to wrap and stay inside a rectangle?

To force text to stay inside the width of a rectangle, use this:

text-anchor="start" textLength="#(wbw-1)#lengthAdjust="spacingAndGlyphs"