/
example3.html
61 lines (57 loc) · 2.31 KB
/
example3.html
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
<html>
<head>
<title>Example 3 - SGvizler</title>
<a href="index.html" target="_blank">Example 1</a><br/>
<a href="example2.html" target="_blank">example 2</a><br/>
<a href="example4.html" target="_blank">example 4</a><br/>
<a href="example-jquery.html" target="_blank">Jquery example</a><br/>
<script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="sgvizler.js"></script>
<script>
var MyOwnNamespace = {};
MyOwnNamespace.HelloWorld = sgvizler.chartsAdd(
// 1. arg: module.
"MyOwnNamespace",
// 2. arg: function name.
"HelloWorld",
// 3. arg: visualisation function.
function (datatable, chartOptions) {
// collect from numbers from the datatable:
var c, noColumns = datatable.getNumberOfColumns(),
r, noRows = datatable.getNumberOfRows(),
// set default values for chart options
opt = $.extend({ word: 'Hello World' }, chartOptions),
tablecontents = "";
for (r = 0; r < noRows; r += 1) {
tablecontents += '<tr>';
for (c = 0; c < noColumns; c += 1) {
tablecontents += '<td>' + opt.word + '</td>';
}
tablecontents += '</tr>';
}
$(this.container)
.empty()
.html(tablecontents);
// Using an external library, loaded by the dependencies (arg. 4)
new Tablesort(this.container);
},
// 4. arg: dependencies. 'Tablesort' is the function we need.
{ Tablesort: "//cdnjs.cloudflare.com/ajax/libs/tablesort/1.6.1/tablesort.min.js" }
);
$(document).ready(
function (){ sgvizler.containerDrawAll(); }
);
</script>
</head>
<body>
<h1>Sgvizler example 3</h1>
<p>Please allow the page to load for a few seconds.</p>
<table id="example" style="border: 1px solid brown;"
data-sgvizler-endpoint="https://dbpedia.org/sparql"
data-sgvizler-query="SELECT * { ?s ?p ?o, ?o2 } LIMIT 6"
data-sgvizler-chart="MyOwnNamespace.HelloWorld"
data-sgvizler-chart-options="word=Hi World">
</table>
</body>
</html>