Top-align nodes - graphviz

Top-align nodes - graphviz

Problem
The following image shows an organization chart:
The Full Name boxes are aligned along their centre. The desired layout, however, aligns the boxes along the top:
Source Code
The code for the graph is as follows:
digraph G {
fixedwidth = true;
node [
shape="box",
style="rounded",
penwidth = 1,
width=2.0,
fontname = "Arial",
fontsize = 12
];
edge [
color="#142b30",
arrowhead="vee",
arrowsize=0.75,
penwidth = 2,
weight=1.0
];
A1 [ label = <
<TABLE BORDER="0" CELLSPACING="5">
<TR>
<TD><FONT POINT-SIZE="16">Top Level</FONT></TD>
</TR>
<TR>
<TD><FONT POINT-SIZE="18">Owner</FONT></TD>
</TR>
</TABLE>>
];
B3 [ label = <
<TABLE BORDER="0" CELLSPACING="5">
<TR>
<TD><FONT POINT-SIZE="12">Second Level<BR/>(1)</FONT></TD>
</TR>
<TR>
<TD><FONT POINT-SIZE="14">Owner</FONT></TD>
</TR>
</TABLE>>
];
B4 [ label = <
<TABLE BORDER="0" CELLSPACING="5">
<TR>
<TD><FONT POINT-SIZE="12">Second Level<BR/>(2)</FONT></TD>
</TR>
<TR>
<TD><FONT POINT-SIZE="14">Owner</FONT></TD>
</TR>
</TABLE>>
];
B5 [ label = <
<TABLE BORDER="0" CELLSPACING="5">
<TR>
<TD><FONT POINT-SIZE="12">Second Level<BR/>(3)</FONT></TD>
</TR>
<TR>
<TD><FONT POINT-SIZE="14">Owner</FONT></TD>
</TR>
</TABLE>>
];
B6 [ label = <
<TABLE BORDER="0" CELLSPACING="5">
<TR>
<TD><FONT POINT-SIZE="12">Second Level<BR/>(4)</FONT></TD>
</TR>
<TR>
<TD><FONT POINT-SIZE="14">Owner</FONT></TD>
</TR>
</TABLE>>
];
C4 [ label = <
<TABLE BORDER="0" CELLPADDING="0" ALIGN="LEFT">
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
</TABLE>>
];
C5 [ label = <
<TABLE BORDER="0" CELLPADDING="0" ALIGN="LEFT">
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
</TABLE>>
];
C6 [ label = <
<TABLE BORDER="0" CELLPADDING="0" ALIGN="LEFT">
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
</TABLE>>
];
C7 [ label = <
<TABLE BORDER="0" CELLPADDING="0" ALIGN="LEFT">
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
<TR>
<TD ALIGN="LEFT"><FONT POINT-SIZE="10">Full Name</FONT></TD>
</TR>
</TABLE>>
];
{ rank = same; B3; B4; B5; B6; }
A1 -> B3:n;
A1 -> B4:n;
A1 -> B5:n;
A1 -> B6:n;
{ rank = same; C4; C5; C6; C7; }
B3 -> C4;
B4 -> C5;
B5 -> C6;
B6 -> C7;
}
Question
How would you align the Full Name boxes along the top?
Thank you!

Probably not exactly what you are looking for but you can set the height of the boxes to be the same (by using fixedsize=true,height="some number" then you can have the text be centered in the middle (by default). So adding the following lines:
C4 [fixedsize=true,height=2];
C5 [fixedsize=true,height=2];
C6 [fixedsize=true,height=2];
C7 [fixedsize=true,height=2];
would result in:

This is basically the same question as:
graphviz: left/right align nodes instead of centering?
Unfortunately, although I've been using Graphviz for about 8 years, I'm not sure how to accomplish what you want.

Related

Graphviz draw tile with different cell colour and length

How to represent this in a dot file?

digraph structs {
node1 [shape=plaintext,
label = <<table border="0" cellspacing="0">
<tr>
<td width="20">0</td>
<td width="20">1</td>
<td width="20">2</td>
<td width="20">3</td>
<td width="20">4</td>
<td width="20">5</td>
<td width="20">6</td>
<td width="20">7</td>
<td width="20">8</td>
<td width="20">9</td>
<td width="20">10</td>
<td width="20">11</td>
<td width="20">12</td>
<td width="20">13</td>
<td width="20">14</td>
</tr>
<tr>
<td border="1" colspan="3" bgcolor="yellow">A</td>
<td border="1" colspan="1" bgcolor="white"></td>
<td border="1" colspan="1" bgcolor="white"></td>
<td border="1" colspan="1" bgcolor="white"></td>
<td border="1" colspan="2" bgcolor="pink">B</td>
<td border="1" colspan="1" bgcolor="white"></td>
<td border="1" colspan="2" bgcolor="green">C</td>
<td border="1" colspan="4" bgcolor="#40e0d0">D</td>
</tr>
</table>>
];
}

Why Firefox incorrectly displays the table with colspan and rowspan?

The table is displayed well in Chrome and Opera, and not at all in Firefox ... How can I fix it?
Screenshot
Code: https://jsfiddle.net/Hamsterman/6zth1mjv/
<table>
<tr>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr></tr>
<tr>
<td colspan="2" rowspan="2"></td>
<td colspan="3" rowspan="3"></td>
<td colspan="3" rowspan="3"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr></tr>
<tr>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr>
<td colspan="3" rowspan="3"></td>
<td colspan="3" rowspan="3"></td>
</tr>
<tr>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr></tr>
<tr>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
<td colspan="2" rowspan="2"></td>
</tr>
<tr></tr>
</table>

how to avoid double borders in HTML graphviz

I have the following simple
Node in a graph:
digraph "graph.svg" {
graph [bgcolor="#333333" fontcolor=white fontname=Helvetica fontsize=16 label="Title" rankdir=TB]
0 [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2" BGCOLOR="#006699">
<TR>
<TD COLSPAN="2">Node Titel</TD>
</TR>
<TR>
<TD COLSPAN="2">Sieve</TD>
</TR>
<TR>
<TD CELLPADDING="0">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#006699">
<TR>
<TD BORDER="1">in 1</TD>
</TR>
<TR>
<TD BORDER="1">in 2</TD>
</TR>
</TABLE>
</TD>
<TD CELLPADDING="0">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#006699">
<TR>
<TD BORDER="1">out 1</TD>
</TR>
<TR>
<TD BORDER="1">out 2</TD>
</TR>
<TR>
<TD BORDER="1">out 3</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>> shape=plaintext]
}
Which produces this output:
How can I make the borders align such that no double borders appear anywhere between the nested tables?
I managed to fiddle around with the CELLSPADING=-1
but I don't think that is the way to go?
I cannot use the COLSPAN option because the inputs and outputs ports are variable in size, that's why I solved this with a nested table for both input and output cells.

you were near there
digraph "graph.svg" {
graph [bgcolor="#333333" fontcolor=white fontname=Helvetica fontsize=16 label="Title" rankdir=TB]
0 [label=<<TABLE BORDER="0" CELLBORDER="1" CELLSPACING="0" CELLPADDING="2" BGCOLOR="#006699">
<TR>
<TD COLSPAN="2">Node Titel</TD>
</TR>
<TR>
<TD COLSPAN="2">Sieve</TD>
</TR>
<TR>
<TD CELLPADDING="0" BORDER="0">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#006699">
<TR>
<TD BORDER="1">in 1</TD>
</TR>
<TR>
<TD BORDER="1">in 2</TD>
</TR>
</TABLE>
</TD>
<TD CELLPADDING="0" BORDER="0">
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" BGCOLOR="#006699">
<TR>
<TD BORDER="1">out 1</TD>
</TR>
<TR>
<TD BORDER="1">out 2</TD>
</TR>
<TR>
<TD BORDER="1">out 3</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>> shape=plaintext]
}

How to create a two column email newsletter

I am trying to create a two column email flyer but I'm having trouble with the coding as Outlook hates CSS.
I'm using tables to keep it as simple as possible but I want two separate tables on the left and the right so I can add data into it as I wish.
I tried using float left and right on the two tables but Outlook ignores this style.
I know the two grey tables at the bottom are each in their own separate "holder" tables but this is so I can duplicate the grey "data" tables for when I add new articles.
<table class="all" width="auto" height="auto" border="0" cellspacing="0"><tr><td height="504">
<table width="750" height="140" border="0" cellspacing="0">
<tr>
<td width="200" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="345" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
<td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
</tr>
<tr>
<td width="200" valign="bottom" bgcolor="#E6E6E6"> </td>
<td align="center" valign="bottom" bgcolor="#E6E6E6"><font color="#111111" face="Arial Narrow" size="+2">DECEMBER NEWSLETTER</font></td>
<td width="152" align="center" valign="bottom" bgcolor="#E6E6E6"><font size="2"><strong>#4 - <span class="orange">04.12.13</span></strong></font></td>
<td width="45" align="center" valign="bottom" bgcolor="#E6E6E6"> </td>
</tr>
</table>
<table width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="75" height="50" bgcolor="#E6E6E6" scope="row"> </td>
<td width="600" rowspan="2" scope="row"><img src="http://placehold.it/600x200"/></td>
<td width="75" bgcolor="#E6E6E6" scope="row"> </td>
</tr>
<tr>
<td width="75" height="81" scope="row"> </td>
<td scope="row"> </td>
</tr>
</table>
<table class="holder" width="750" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top" scope="row">
<table class="inlinetableleft" width="360">
<tr>
<td width="371" align="left">
<!------------LEFT COLUMN------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<th height="103" colspan="4" align="left" valign="middle" bgcolor="#CCCCCC" scope="row"> </th>
</tr>
</table>
<!--------------LEFT COLUMN END------------->
</td>
</tr>
</table>
<table class="inlinetableright" width="360">
<tr>
<td align="left">
<!------------RIGHT COLUMN------------------>
<table width="360" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="106" align="left" bgcolor="#CCCCCC" scope="row"> </td>
</tr>
</table>
<!-----------RIGHT COLUMN END-------------->
</td></tr>
</table>
</td>
</tr>
</table>
Here is a fiddle of my newsletter so far, it's the bottom two grey tables that I want to be side by side.
Fiddle

For HTML emails, nested tables are your friend :)
JSFiddle
Note: the border around the table is just to show you where the tables are.
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center">
<tr>
<td colspan="2">
header content here
</td>
</tr>
<tr>
<td width="300">
<table border="0" width="300" cellpadding="1" cellspacing="0" align="left">
<tr>
<td>Left Content</td>
</tr>
</table>
</td>
<td width="300">
<table border="0" width="300" cellpadding="1" cellspacing="0" align="left">
<tr>
<td>Right content</td>
</tr>
</table>
</td>
</tr>
</table>

Escaping characters with ajax and ColdFusion

Hello I've got an issue with an encode failing. Can anyone spot where I'm going wrong?
<form>
<table cellspacing="0" cellpadding="0" border="0" style="background-color:#ededed;padding:50px;">
<tr>
<td align="left"><b>Screen? (eg. Index)</b></td>
</tr>
<tr>
<td align="left"><input type="text" name="strFeedbackScreen" value="" style="width:300px;"></td>
</tr>
<tr>
<td style="height:10px"></td>
</tr>
<tr>
<td align="left"><b>Comments:</b></td>
</tr>
<tr>
<td align="left"><textarea name="strFeedbackComments" style="width:400px;height:150px;"></textarea></td>
</tr>
<tr>
<td style="height:10px"></td>
</tr>
<tr>
<td align="left"><b>Thank you for your feedback.</b></td>
</tr>
<tr>
<td style="height:10px"></td>
</tr>
<cfoutput>
<tr>
<td align="left"><input type="button" value="Send" class="button"
onMouseover="this.className = 'buttonover';"
onMousedown="this.className = 'buttonover';"
onMouseOut="this.className = 'button';"
onclick="sendfeedback('strFeedbackScreen='+escape(this.form.strFeedbackScreen.value)+',strFeedbackComments='+escape(this.form.strFeedbackComments.value),'send_feedback_action_ajax')">
</td>
</tr>
</cfoutput>
</table>
</form>
is the form
<cfoutput>
<cfmail to="feedback#example.com" from="feedback#example.com" subject="Feedback left" type="html">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>**** This email has been sent to all concerned ****</td>
</tr>
<tr>
<td style="height:10px;"> </td>
</tr>
<cfif application.ds eq "App1">
<tr>
<td>This feedback has been left on App 1.</td>
</tr>
<cfelseif application.ds eq "App2">
<tr>
<td>This feedback has been left on App 2.</td>
</tr>
<cfelseif application.ds eq "App3">
<tr>
<td>This feedback has been left on App 3.</td>
</tr>
</cfif>
<tr>
<td style="height:10px;"> </td>
</tr>
<tr>
<td><b>From:</b></td>
</tr>
<tr>
<td>#session.stafffirstname# #session.staffsurname# - #session.staffemail#</td>
</tr>
<tr>
<td style="height:10px;"> </td>
</tr>
<tr>
<td><b>Screen:</b></td>
</tr>
<tr>
<td>#strFeedbackScreen#</td>
</tr>
<tr>
<td style="height:10px;"> </td>
</tr>
<tr>
<td><b>Comments:</b></td>
</tr>
<tr>
<td>#strFeedbackComments#</td>
</tr>
</table>
</cfmail>
</cfoutput>
is the action.cfm
and the javascript is
function sendfeedback(fields,action) {
turnLayeron('ajaxloading');
nocache = Math.random();
http.open('get', '/ajax.cfm?action='+action+'&fields='+fields+'&nocache='+nocache);
http.onreadystatechange = function() {
if(http.readyState == 4){
closepopout();
turnLayeroff('ajaxloading');
}
};
http.send(null);
}
I've been trying to get uriencode working, but it encodes my string before it gets emailed.

Change your JavaScript to following:
function sendfeedback(fields,action) {
http.open("POST", '/ajax.cfm?action='+action+'&nocache='+nocache, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.onreadystatechange = function() {
if(http.readyState == 4){
closepopout();
turnLayeroff('ajaxloading');
}
};
http.send(fields);
}
Also change your function call to:
onclick="sendfeedback('strFeedbackScreen='+escape(this.form.strFeedbackScreen.value)+'&strFeedbackComments='+escape(this.form.strFeedbackComments.value),'send_feedback_action_ajax')"

Develop Reference

ruby bash windows laravel spring algorithm oracle macos go visual-studio

Top-align nodes - graphviz

This is basically the same question as: graphviz: left/right align nodes instead of centering? Unfortunately, although I've been using Graphviz for about 8 years, I'm not sure how to accomplish what you want.

Related

Graphviz draw tile with different cell colour and length

Why Firefox incorrectly displays the table with colspan and rowspan?

how to avoid double borders in HTML graphviz

How to create a two column email newsletter

Escaping characters with ajax and ColdFusion

Categories

Resources