Skip to content

Commit

Permalink
Merge pull request #56 from tcarver/master
Browse files Browse the repository at this point in the history 
add extra example
  • Loading branch information
@tcarver
tcarver authored Jul 10, 2017
2 parents 1123598 + 1c9a0b8 commit 7116a60
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 1 deletion.
80 changes: 80 additions & 0 deletions dist/example3.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,maximum-scale=2">

<link href="https://code.jquery.com/ui/1.12.1/themes/cupertino/jquery-ui.css" rel="stylesheet" type="text/css" media="all" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="css/pedigreejs.min.css" />

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="js/pedigreejs.min.js"></script>

<style>body{font-size: 18px}</style>


<script type="text/javascript">
$( document ).ready(function() {
var parent_width = $('#ped3').parent().width();
var margin = ($(window).width()-parent_width > 10 ? 100 : 30);
var svg_width = (parent_width > 750 ? (parent_width > 1200 ? (parent_width*8/12 - margin)*0.6 :
(parent_width*8/12 - margin)*0.8) : parent_width- margin);

var dataset = [
{"name": "f11", "display_name": "Jane", "sex": "F", "status": 1, "top_level": true, "breast_cancer_diagnosis_age":67, "ovarian_cancer_diagnosis_age":63},
{"name": "m11", "sex": "M", "top_level": true},
{"name": "f12", "sex": "F", "top_level": true, "breast_cancer_diagnosis_age":55},
{"name": "m12", "sex": "M", "top_level": true},
{"name": "m21", "sex": "M", "mother": "f11", "father": "m11", "age": 56},
{"name": "f21", "display_name": "Joy", "sex": "F", "mother": "f12", "father": "m12", "breast_cancer_diagnosis_age":55, "breast_cancer2_diagnosis_age": 60, "ovarian_cancer_diagnosis_age":58, "age": 63},
{"name": "ch1", "display_name": "Ana", "sex": "F", "mother": "f21", "father": "m21", "proband": true, "age": 25}
];

var opts = {
'targetDiv': 'ped3',
'btn_target': 'cancer_history3',
'width': svg_width,
'height': 400,
'symbol_size': 40,
'edit': true,
'node_background': '#fff',
'DEBUG': (pedigree_util.urlParam('debug') === null ? false : true)
};

var local_dataset = pedcache.current(opts);
if (local_dataset !== undefined && local_dataset !== null) {
opts.dataset = local_dataset;
} else {
opts.dataset = dataset;
}
opts= ptree.build(opts);
});
</script>
</head>
<body>

<div class="text-center">
<label class="btn btn-default btn-file">
<input id="load" type="file" style="display: none;"/>Load
</label>
<label class="btn btn-default btn-file">
<input id="save" type="button" style="display: none;"/>Save
</label>
<label class="btn btn-default btn-file">
<input id="print" type="button" style="display: none;"/>Print
</label>
<label class="btn btn-default btn-file">
<input id="svg_download" type="button" style="display: none;"/>SVG
</label>
<div id='cancer_history3'></div>
<div id="ped3"></div>
<div id="node_properties"></div>
</div>

</body>
3 changes: 2 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,8 @@ <h3>Overview</h3>
to previous versions.
</p>
<p>
Other example pages are given <a href="dist/example.html">here</a> and <a href="dist/example2.html">here</a>.
Other example pages are given <a href="dist/example.html">here</a>, <a href="dist/example2.html">here</a>
and <a href="dist/example3.html">here</a>.
</p>
</div>
</div>
Expand Down

0 comments on commit 7116a60

Please sign in to comment.