javascript/samples/javascript.controls/CaseFirstFamilyChart.html at master · wangscript007/javascript

51 lines (45 loc) · 2.47 KB
﻿<!DOCTYPE html> 
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>First family chart</title>
	<script type="text/javascript" src="../../primitives.js"></script>
	<link href="../../css/primitives.css" media="screen" rel="stylesheet" type="text/css" />
	<script type='text/javascript'>
		var control;
		document.addEventListener('DOMContentLoaded', function () {
			var options = new primitives.FamConfig();
			var items = [
				{ id: 1, title: "Thomas Williams", label: "Thomas Williams", description: "1st husband", image: "../images/photos/t.png" },
				{ id: 2, title: "Mary Spencer", label: "Mary Spencer", description: "The Mary",image: "../images/photos/m.png" },
				{ id: 3, title: "David Kirby", label: "David Kirby", description: "2nd Husband", image: "../images/photos/d.png" },
				{ id: 4, parents: [1, 2], title: "Brad Williams", label: "Brad Williams", description: "1st son", image: "../images/photos/b.png" },
				{ id: 5, parents: [2, 3], title: "Mike Kirby", label: "Mike Kirby", description: "2nd son, having 2 spouses", image: "../images/photos/m.png"},
				{ id: 6, title: "Lynette Maloney", label: "Lynette Maloney", description: "Spouse I", image: "../images/photos/m.png" },
				{ id: 11, parents: [5, 6], title: "Steven Powell", label: "Steven Powell", description: "1st son", image: "../images/photos/s.png" },
				{ id: 7, title: "Sara Kemp", label: "Sara Kemp", description: "Spouse II", image: "../images/photos/s.png" },
				{ id: 12, parents: [5, 7], title: "John Smith", label: "John Smith", description: "2ns son", image: "../images/photos/j.png" },
				{ id: 8, parents: [7], title: "Leon Kemp", label: "Leon Kemp", description: "", image: "../images/photos/l.png" }
			options.pageFitMode = primitives.PageFitMode.None;
			options.items = items;
			options.cursorItem = 2;
			options.linesWidth = 1;
			options.linesColor = "black";
			options.hasSelectorCheckbox = primitives.Enabled.False;
			options.normalLevelShift = 20;
			options.dotLevelShift = 20;
			options.lineLevelShift = 20;
			options.normalItemsInterval = 10;
			options.dotItemsInterval = 10;
			options.lineItemsInterval = 10;
			options.arrowsDirection = primitives.GroupByType.Parents;
			options.showExtraArrows = false;
			control = primitives.FamDiagram(document.getElementById("basicdiagram"), options);
	<div id="basicdiagram" style="width: 640px; height: 480px; border-style: dotted; border-width: 1px;"></div>
FilesExpand file tree

CaseFirstFamilyChart.html

Latest commit

History

CaseFirstFamilyChart.html

File metadata and controls
