Closed nigelhorne closed 7 years ago
wimrijnders
commented
7 years ago You can do exactly the same thing to set the height as in issue #2969, literally.
Setting a percentage for the width/height option defines the size in relation to the encompassing div element of the canvas element. This gives you an alternative option to set the size; resize the div where the canvas is in.
nigelhorne
commented
7 years ago I tried that before posting her, but it doesn't work. The display goes blank with this error:
TypeError: window.height is not a function[Learn More]
wimrijnders
commented
7 years ago It works just fine when I try it. It's hard to divine something about this without seeing the surrounding code.
In global terms, my test code looks like this:
<!doctype html>
<html>
<head>
...
<script type="text/javascript" src="jquery.js"></script>
...
<script type="text/javascript">
function draw() {
...
// Somewhere here, option is defined
options.height = Math.round($(window).height() * 0.95) + 'px';
...
network = new vis.Network(container, data, options);
}
</script>
</head>
<body onload="draw();">
...
</body>
</html>Does this correspond with your code?
nigelhorne
commented
7 years ago Nearly:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!--
See http://stackoverflow.com/questions/39096205/family-chart-with-horizontal-and-vertical-line-connectors-using-vis-js
-->
<html lang="en">
<head>
<title>Descendents of [% person.title %]</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script>
<link rel="stylesheet" href="/css/web.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css" />
<style type="text/css">
body {
font: 10pt sans;
}
#network {
width: 100%;
height: 600px;
background: white;
border: 1px solid lightgray;
}
/*div.vis-tooltip { font-size:10px; white-space: normal; width: 30em; word-wrap: break-word; }*/
div.vis-tooltip {
font-size: 10px;
white-space: normal;
width: 30em;
max-width: 300px;
word-wrap: break-word;
padding: 5px;
}
</style>
<script type="text/javascript">
function main() {
[% graph %]
// var timelineHeight = Math.round($(window).height() * 0.85) + 'px';
var options = {
// height: timelineHeight,
height: Math.round($(window).height() * 0.85) + 'px',
nodes: {
borderWidth: 1,
borderWidthSelected: 1,
shape: "box",
color: {
border: 'lightgray',
background: 'white',
highlight: {
border: 'lightgray',
background: 'lightblue'
},
hover: {
border: 'lightgray',
background: 'lightblue'
}
}
},
edges: {
smooth: {
type: 'cubicBezier',
forceDirection: 'vertical',
roundness: 1
},
color: 'lightgray'
},
layout: {
hierarchical: {
direction: 'UD',
nodeSpacing: 150
}
},
interaction: {dragNodes :false},
physics:false
};
var network = new vis.Network(document.getElementById("network"), graph, options);
}
</script>
</head>
<body onload="main();">
<center>
<h1>Descendents of [% person.title %]</h1>
[ <a href="?page=people&home=1">Home</a> ] |
[ <a href="?page=censuses">Census Index</a> ] |
[ <a href="?page=surnames">Surname Index</a> ] |
[ <a href="?page=history">Family History</a> ] |
[ <a href="?page=todo">To Do</a> ] |
[ <a href="?page=calendar">Calendar</a> ] |
[ <a href="/visjs.html">Timeline</a> ]
</center>
<p><font size=+1>
Click and move the mouse to move around the tree, and use
the mouse wheel to zoom in and out.
Only people with known birth dates are shown.
</font></p>
<div id="network"></div>
</body>
</html>Works, as far as I can tell. At least, if I remove the [% graph %] bit, which is apparently at template element, the $(window).height() call does what I expect it to.
Something else is going on. My first thought is what [% graph %] inserts. Can you verify that this is valid HTML?
nigelhorne
commented
7 years ago Thanks for working with me on this. Here's a sample HTML output - sorry it's a bit difficult to read, the template processing code also compresses the HTML. Weblint shows no errors.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Descendents of Isaac Horne 1885 - 1964</title><script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.js"></script><link rel="stylesheet" href="/css/web.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.19.1/vis.min.css"/>
<style type="text/css">body{font:10pt sans;}#network{width:100%;height:600px;background:white;border:1px solid lightgray;}div.vis-tooltip{font-size:10px;white-space:normal;width:30em;max-width:300px;word-wrap:break-word;padding:5px;}</style><script type="text/javascript">
function main() {
var graph = {
nodes: new vis.DataSet([
{"id": "0", "label": "Isaac Horne", "level": 0, "title": "<img src=\"/img/thumb-Isaac-Horne.png\"><p><h2>Isaac Horne</h2><hr>A farm worker, vanman and thatcher and the child of <a href=\"?page=people&entry=I12\">Charles Horn</a> (a farm labourer) and <a href=\"?page=people&entry=I11\">Jane Tutt</a>, <b>Isaac Horne</b>, the grandfather of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Drapers Farm, Margate, Kent, England on Apr 10, 1885<span class=\"citation\">1,2,3,4,5</span> and married <a href=\"?page=people&entry=I5\">May Spratt</a> (with whom he had 7 children: <a href=\"?page=people&entry=I16\">Isaac George</a>, <a href=\"?page=people&entry=I17\">Ernest John</a>, <a href=\"?page=people&entry=I15\">Gladys Jane</a>, <a href=\"?page=people&entry=I13\">Wilfred George</a>, <a href=\"?page=people&entry=I4\">Edmund Frank</a>, <a href=\"?page=people&entry=I14\">Frederick Norman</a> and <a href=\"?page=people&entry=I10\">Ronald Leonard</a>) at All Saints Church, Westbrook, Margate, Kent, England on Jul 2, 1910<span class=\"citation\">8</span>.<p>During his life he lived in Drapers Cottage in Margate on Apr 5, 1891<span class=\"citation\">1</span>; at 15 Haine Cottages, St Lawrence, Thanet, Kent on Mar 31, 1901<span class=\"citation\">2</span>; at 4 Newington Terrace, St Lawrence, Thanet, Kent on Apr 2, 1911<span class=\"citation\">3</span>; at Way Cottages, Minster, Thanet, Kent in 1936 and on Sep 29, 1939; at Lachine, High Street, Minster, Thanet, Kent in 1964.<p>He died on Nov 14, 1964 in Haine Hospital, Ramsgate, Kent<span class=\"citation\">6,7</span> (Heart failure; bronchitis; carcenoma of the rectum and secondary in liver and lungs) and was buried at Minster Cemetery, Tothill Street, Minster, Thanet, Kent in 1964." },
{"id": "0.1", "label": "Isaac Horne", "level": 1, "title": "The youngest of 7 children of <a href=\"?page=people&entry=I7\">Isaac Horne</a> (a works on farm) and <a href=\"?page=people&entry=I5\">May Spratt</a>, <b>Isaac Horne</b>, the uncle of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Thanet, Kent, England on Sep 10, 1911<span class=\"citation\">1,2,3</span> and baptized in St. Lawrence, Ramsgate, Kent, England on Sep 23, 1911.<p>He died on Oct 6, 1911 in St. Lawrence in Thanet<span class=\"citation\">2</span> (4 Newington Terrace) and was buried in St. Lawrence on Oct 10, 1911 (Freereg.)." },
{"id": "0.2", "label": "Ernest Horne", "level": 1, "title": "The 2nd of 7 children of <a href=\"?page=people&entry=I7\">Isaac Horne</a> (a works on farm) and <a href=\"?page=people&entry=I5\">May Spratt</a>, <b>Ernest Horne</b>, the uncle of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Thanet, Kent, England on Aug 26, 1912<span class=\"citation\">1</span>.<p>He died in Thanet on Apr 13, 1913<span class=\"citation\">1</span>." },
{"id": "0.3", "label": "Gladys Horne", "level": 1, "title": "<img src=\"/img/thumb-Gladys-Jane-Horne.png\"><p><h2>Gladys Horne</h2><hr>A nurse and the 3rd of 7 children of <a href=\"?page=people&entry=I7\">Isaac Horne</a> (a works on farm) and <a href=\"?page=people&entry=I5\">May Spratt</a>, <b>Gladys Horne</b>, the aunt of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Thanet, Kent, England on Jan 25, 1914<span class=\"citation\">1</span>.<p>During her life she lived at 55 Salisbury Road, Banstead, Surrey, England on Sep 29, 1939; at 53 Bassetts Way, Farnborough, Kent, England in 1958.<p>She died on Jul 11, 1958 in Farnborough Hospital, Orpington, Kent, England<span class=\"citation\">2,3</span> and was buried at Minster Cemetery, Tothill Street, Minster, Thanet in 1958. She traveled from London, England on Dec 16, 1938. " },
{"id": "0.4", "label": "Wilfred Horne", "level": 1, "title": "<img src=\"/img/thumb-Wilfred-George-Horne.png\"><p><h2>Wilfred Horne</h2><hr>The 4th of 7 children of <a href=\"?page=people&entry=I7\">Isaac Horne</a> (a works on farm) and <a href=\"?page=people&entry=I5\">May Spratt</a>, <b>Wilfred Horne</b>, the uncle of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Thanet, Kent, England on Aug 22, 1918<span class=\"citation\">1,2,3</span> and was married twice, to <a href=\"?page=people&entry=I265\">Hilda Wood</a> (in 1942 in Blackwell, Chirton, North Shields, Northumberland, England) and <a href=\"?page=people&entry=I1464\">Ellen Taylor</a> (in 1970). He had 3 children, all with Hilda Wood: Gillian C, Hilary Ann and Adrian. In 1983 he was living at 83 Pitt Street, Newcastle Upon Tyne, England.<p>He died on Mar 8, 1983 in Newcastle Upon Tyne, Northumberland<span class=\"citation\">1,3</span>." },
{"id": "0.4.1", "label": "Hilary Horne", "level": 2, "title": "<img src=\"/img/thumb-Hilary-Horne.png\"><p><h2>Hilary Horne</h2><hr>The 2nd of 3 children of <a href=\"?page=people&entry=I13\">Wilfred Horne</a> and <a href=\"?page=people&entry=I265\">Hilda Wood</a>, <b>Hilary Horne</b>, the cousin on the father's side of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Tynemouth, Tyne and Wear, England on Apr 28, 1949<span class=\"citation\">1</span> and married <a href=\"?page=people&entry=I1112\">Michael Maxey</a> (with whom she had 2 surviving children: <a href=\"?page=people&entry=I1113\">Noel Peter</a> and <a href=\"?page=people&entry=I1114\">Sarah Louise</a>) in Tynemouth, Northumberland, England <i>c.</i> Aug 1971<span class=\"citation\">2</span>.<p>She died on Feb 28, 2011 in Northumberland (From bmdsonline.co.uk: MAXEY (Dudley). Peacefully at home on 1st March, Hilary Anne, dear mother of Noel and Sarah, grandmother to Dale, Caitlin and Aidan, dear sister of Gillian and Adrian, a much loved niece of Winnie and cousin Keith. Funeral Service and inter)." },
{"id": "0.5", "label": "Edmund Horne", "level": 1, "title": "<img src=\"/img/thumb-Edmund-Frank-Horne.png\"><p><h2>Edmund Horne</h2><hr>A road sweeper and market gardener and the 5th of 7 children of <a href=\"?page=people&entry=I7\">Isaac Horne</a> (a works on farm) and <a href=\"?page=people&entry=I5\">May Spratt</a>, <b>Edmund Horne</b>, the father of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Minster, Thanet, Kent, England on Sep 3, 1919<span class=\"citation\">1,2,3,4,5</span> and married <a href=\"?page=people&entry=I3\">Joyce Cowell</a> (with whom he had 4 children: <a href=\"?page=people&entry=I6\">David James</a>, <a href=\"?page=people&entry=I8\">Diane Joyce</a>, <a href=\"?page=people&entry=I1\">Nigel John</a> and <a href=\"?page=people&entry=I9\">David James</a>) at St Mary The Virgin, Minster, Thanet, Kent, England on Nov 1, 1952.<p>During his life he lived at Way Cottages, Minster, Thanet in 1939; at 20 Molineux Road, Minster, Thanet in 1959.<p>He died on Oct 12, 1997 at Wisdom Hospice, High Bank, Rochester, Kent<span class=\"citation\">3,4,5</span> (Cancer) and is buried at Minster Cemetery, Tothill Street, Minster, Thanet<span class=\"citation\">4,5</span>." },
{"id": "0.5.1", "label": "David Horne", "level": 2, "title": "The youngest of 4 children of <a href=\"?page=people&entry=I4\">Edmund Horne</a> (a road sweeper) and <a href=\"?page=people&entry=I3\">Joyce Cowell</a>, <b>David Horne</b>, the brother of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Ramsgate, Kent, England on Apr 29, 1958.<p>He died on the same day." },
{"id": "0.5.2", "label": "Diane Horne", "level": 2, "title": "The youngest of 4 children of <a href=\"?page=people&entry=I4\">Edmund Horne</a> (a road sweeper) and <a href=\"?page=people&entry=I3\">Joyce Cowell</a>, <b>Diane Horne</b>, the sister of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Ramsgate, Kent, England on Apr 29, 1958.<p>She died on the same day." },
{"id": "0.6", "label": "Frederick Horne", "level": 1, "title": "<img src=\"/img/thumb-Frederick-Norman-Horne.png\"><p><h2>Frederick Horne</h2><hr>The 6th of 7 children of <a href=\"?page=people&entry=I7\">Isaac Horne</a> (a works on farm) and <a href=\"?page=people&entry=I5\">May Spratt</a>, <b>Frederick Horne</b>, the uncle of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Thanet, Kent, England on Nov 23, 1920<span class=\"citation\">1,2,3</span> and married <a href=\"?page=people&entry=I266\">Ivy Benstead</a> in Thanet in Jul/aug/sep 1961<span class=\"citation\">4</span>. In 1942 he was living in Oschatz, Saxony, Germany<span class=\"citation\">5</span>.<p>He died <i>c.</i> Nov 2006 in Minster in Thanet<span class=\"citation\">3</span> (Age: 86). He served in the military in Camp IV-G, Oschatz, Saxony, Germany in 1942 (<em>lance Corporal. POW. The Buffs.</em>)" },
{"id": "0.7", "label": "Ronald Horne", "level": 1, "title": "The eldest of 7 children of <a href=\"?page=people&entry=I7\">Isaac Horne</a> (a works on farm) and <a href=\"?page=people&entry=I5\">May Spratt</a>, <b>Ronald Horne</b>, the uncle of <a href=\"?page=people&home=1\">Nigel Horne</a>, was born in Thanet, Kent, England on Apr 19, 1927<span class=\"citation\">1,2</span>.<p>He died in Thanet in Apr-may-jun 1930<span class=\"citation\">3</span>." },
]),
edges: new vis.DataSet([
{"from": "0", "to": "0.1"},
{"from": "0", "to": "0.2"},
{"from": "0", "to": "0.3"},
{"from": "0", "to": "0.4"},
{"from": "0.4", "to": "0.4.1"},
{"from": "0", "to": "0.5"},
{"from": "0.5", "to": "0.5.1"},
{"from": "0.5", "to": "0.5.2"},
{"from": "0", "to": "0.6"},
{"from": "0", "to": "0.7"},
])
};
var options = {
nodes: {
borderWidth: 1,
borderWidthSelected: 1,
shape: "box",
color: {
border: 'lightgray',
background: 'white',
highlight: {
border: 'lightgray',
background: 'lightblue'
},
hover: {
border: 'lightgray',
background: 'lightblue'
}
}
},
edges: {
smooth: {
type: 'cubicBezier',
forceDirection: 'vertical',
roundness: 1
},
color: 'lightgray'
},
layout: {
hierarchical: {
direction: 'UD',
nodeSpacing: 150
}
},
interaction: {dragNodes :false},
physics:false,
interaction: {
navigationButtons: true,
keyboard: true
}
};
var network = new vis.Network(document.getElementById("network"), graph, options);
}</script>
</head>
<body onload="main();">
<center>
<h1>Descendents of Isaac Horne 1885 - 1964</h1>
[ <a href="?page=people&home=1">Home</a> ] |
[ <a href="?page=censuses">Census Index</a> ] |
[ <a href="?page=surnames">Surname Index</a> ] |
[ <a href="?page=history">Family History</a> ] |
[ <a href="?page=todo">To Do</a> ] |
[ <a href="?page=calendar">Calendar</a> ] |
[ <a href="/visjs.html">Timeline</a> ]
</center><p><font size=+1>
Click and move the mouse to move around the tree, and use
the mouse wheel to zoom in and out, or use the green icons.
Only people with known birth dates are shown.
</font></p><div id="network"></div></body></html>I just had a thought: this is exactly the error that is the result of issue #2912. Would you mind checking if you have the same strange character as mentioned in #2981?
nigelhorne
commented
7 years ago I am using the version from CDN. I checked anyway to be on the safe side, I do not have that problem. Here is my code:
// Lenient ordinal parsing accepts just a number in addition to
// number + (possibly) stuff coming from _dayOfMonthOrdinalParse.
// TODO: Remove "ordinalParse" fallback in next major release.
this._dayOfMonthOrdinalParseLenient = new RegExp(
(this._dayOfMonthOrdinalParse.source || this._ordinalParse.source) +
'|' + (/\d{1,2}/).source);Believe it or not, the weird character is there. It's a Unicode character with UTF-8 code c2a0: NO-BREAK-SPACE.
Whether this affects you, depends on what program you're using. Unicode-savvy programs can deal with it, others not (Safari is one of the latter - are you using that by any chance?). This made it incredibly hard to find; it's a space by definition, it won't show up in a modern editor.
To test if this is your issue, we need to find a version without that strange character. Looking for options; perhaps revert to a previous version of vis.js?
An alternative is to use a local copy of this version of vis.js and just edit the character away. I think this is preferable.
nigelhorne
commented
7 years ago I will look at a previous version. In the meatime, to answer your question, I've tried both Firefox and (yes) Safari - it works on neither.
wimrijnders
commented
7 years ago For completeness: your last big HTML sample output loads perfectly. So it's not a syntax error or suchlike.
nigelhorne
commented
7 years ago I tried replacing:
height: 600px;
with
height: Math.round($(window).height() * 0.80) + 'px';
But instead of 80% of the screen-size it made it much smaller, say 20%.
wimrijnders
commented
7 years ago I have the strong impression that you are changing the height of the canvas view again. Please re-read the comments in this issue. You should be resizing the div that contains the canvas view.
This works for me:
// Pre: data defined here
var options = {
...
width: 100%, // This fills out the canvas size to the encompassing div
height: 100% // idem
};
var container = document.getElementById('mynetwork'); // i.e. the div containing the network
var network = new vis.Network(container, data, options);
// Get the new height from the window height
var height = Math.round(window.innerHeight * 0.80) + 'px'; // The DOM way
//var height = Math.round($(window).height() * 0.80) + 'px'; // The jQuery way
// Now, resize the container (and not the canvas)
document.getElementById('mynetwork').style.height = height;Not for me, setting "height: 80%" makes the size really small. It's still using the percentage size of the canvas, whereas I'd like an option for it to be the percentage of the size of the browser window.
nigelhorne
commented
7 years ago 
Look at this, with it set to 80% - see all the white space below!
wimrijnders
commented
7 years ago Please try my example verbatim. This sets the view to 80% screen height.
This is your intent, right? It's not the same as what you're trying. Consider it a workaround.
nigelhorne
commented
7 years ago Thanks for persisting with this, but I just can't get it to do what I want. I appreciate your time and effort, but I'm going to close this for now and come back to it a bit later. I'm sure it's my lack of understanding of CSS that's the problem here.
This is similar to https://github.com/almende/vis/issues/2970, though Network does support a percentage as the argument to the height option, it's the height of the "canvas" not the viewable screen. I'm also at a loss as to how to make the fix in 2970 work here.
See, for example, https://genealogy.nigelhorne.com/cgi-bin/page.fcgi?page=descendants&entry=I534