Dashboard - how to draw lines?

Question

Question

Oliver Wilms · Jun 3, 2020

#CSP #Dashboards #Frontend #Graph #HTML #Other

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

Block diagram parts

Discussion (9)2

Log in or sign up to continue

Oliver Wilms · Jun 29, 2020

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

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

0 0

score 0 · Answer 1 · 2020-06-04T08:08:00-04:00

If you're interested in monitoring, try brand new System Alerting and Monitoring. There was also a Tech Talk about it recently.

score 0 · Answer 2 · 2020-06-04T23:24:59-04:00

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

score 0 · Answer 3 · 2020-06-05T06:16:19-04:00

Eduard Lebedyuk · Jun 5, 2020

You can use d3.js do draw graphs.

0 0

score 0 · Answer 4 · 2020-06-05T01:08:27-04:00

You can draw lines in a chart using python and some modules, as I did here:

http://iris-python-suite.eastus.cloudapp.azure.com/global-chart

Is something like this that you want?

score 0 · Answer 5 · 2020-06-05T19:26:00-04:00

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.

score 0 · Answer 6 · 2020-06-05T23:04:17-04:00

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.

score 0 · Answer 7 · 2020-06-06T15:31:40-04:00

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

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

score 0 · Answer 8 · 2020-06-12T19:28:18-04:00

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?