datavis/makeChart.html at master · dngupta/datavis · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" width="device-width, initial-scale=1.0">
	<title>Make a graph with data from Open Context</title>

	<!-- load Bootstrap CSS -->
	<link rel="stylesheet" href="https://opencontext.org/static/bootstrap/3.3.4/css/bootstrap.min.css" />

	<!-- loads jquery for AJAX requests -->
	<script src= "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" ></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js" ></script>

	<!-- loads numeric styling -->
	<script src="/datavis/js/numeric-styling.js" ></script>

	<!-- loads chart script and data -->
	<script src= "https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.bundle.min.js" ></script>
	<script src = "/datavis/js/chrono-chart.js" ></script>

</head>

<body>
	<canvas id="chrono-chart"></canvas>

	<script>
	function getParameter(theParameter) {
		  var params = window.location.search.substr(1).split('&');

		  for (var i = 0; i < params.length; i++) {
		    var p=params[i].split('=');
			if (p[0] == theParameter) {
			  return decodeURIComponent(p[1]);
			}
		  }
		  return false;
	}


	var ctx = document.getElementById("chrono-chart");
	var url = getParameter('oc-search');
        if(url == false){
		var url = 'https://opencontext.org/subjects-search/United+States.json';
	}
   	var chrono = new chrono_chart("chrono-chart", url);
    	chrono.initialize();
	</script>

<!-- This is where filter will go -->
<div class="well" style="margin-top:5%; margin-bottom:10%;">
	<h3>Visualization Filters</h3>
	<div class="row" style="margin-top: 10%">
		<div class="col-xs-2 text-right">
			<label for="exclude_after">Exclude Start After</label>
		</div>
		<div class="col-xs-2">
    			<input type="text" class="form-control" id="exclude_after" placeholder="" />
  		</div>
		<div class="col-xs-2">
		</div>
		<div class="col-xs-2 text-right">
			<label for="exclude_before">Exclude End Before</label>
		</div>
		<div class="col-xs-2">
    			<input type="text" class="form-control" id="exclude_before" placeholder="">
  		</div>
		<div class="col-xs-2">
  			<button type="submit" class="btn btn-default" onclick="chrono.exclude_dates(); return false;">Exclude by Date(s)</button>
		</div>
	</div>
  	<div class="row" style="margin-top:5%;">
		<div class="col-xs-2 text-right">
			<label for="exclude_id">Exclude facet (id / url)</label>
		</div>
		<div class="col-xs-6">
    			<input type="text" class="form-control" id="exclude_id" placeholder="Add ID for chronology facet to ignore" />
			<h5>Excluded Facet IDs</h5>
			<ul id="excluded_ids" class="small">
			</ul>
  		</div>
		<div class="col-xs-2">
		</div>
		<div class="col-xs-2">
  			<button type="submit" class="btn btn-default" onclick="chrono.exclude(); return false;">Add to Exclude List</button>
		</div>
	</div>
	<div class="row" style="margin-top:5%;">
		<div class="col-xs-2 text-right">
			<label for="oc_url">Open Context Search URL</label>
		</div>
		<div class="col-xs-6">
    			<input type="text" class="form-control" id="oc_url" placeholder="Add a data-record search url" />
  		</div>
		<div class="col-xs-2">
		</div>
		<div class="col-xs-2">
  			<button type="submit" class="btn btn-default" onclick="chrono.reload();">Use New URL</button>
		</div>
	</div>
	<!--
        Disable, doesn't work
	<h5>Reset the Visualization</h5>
	<button type="submit" class="btn btn-default" onclick="chrono.clear_exclusions(); return false;">Remove Exclusions</button>
	-->
</div>

</body>

</html>