forked from looma/Looma-II
-
Notifications
You must be signed in to change notification settings - Fork 0
/
chart.html
executable file
·102 lines (92 loc) · 2.71 KB
/
chart.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
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
<!doctype html>
<html>
<head>
<title>3D Bar Garph</title>
<style>
body {font: 10pt arial;}
</style>
<script type="text/javascript" src="js/vis.js"></script>
<script type="text/javascript">
var data = null;
var graph = null;
const subjects = ["Math","Science","History","English"];
function getXValue(x) { //Subject
if (Number.isInteger(x)) return '';
return subjects[x-0.5];
}
function getYValue(y) { // Grade
if (Number.isInteger(y)) return '';
return y+0.5;
}
function getZValue(z) {
return z;
}
function getTooltip(point) {
console.log(point);
return "<div style='text-align:center'><span><b>Grade " + (point.y+0.5) + " " + (subjects[point.x-0.5])
+ "</b></span><br/>" + (point.z) + " Chapters Complete</div>";
}
function onClick(p) {
console.log(p)
}
function drawVisualization() {
// graph data - https://visjs.org/docs/graph3d/#Data_Format
data = [
{x: 0.5, y: 0.5, z: 0},
{x: 0.5, y: 1.5, z: 1},
{x: 0.5, y: 2.5, z: 2},
{x: 0.5, y: 3.5, z: 3},
{x: 0.5, y: 4.5, z: 4},
{x: 0.5, y: 5.5, z: 5},
{x: 1.5, y: 1.5, z: 10},
{x: 1.5, y: 2.5, z: 9},
{x: 1.5, y: 3.5, z: 8},
{x: 1.5, y: 4.5, z: 7},
{x: 1.5, y: 5.5, z: 6}
];
// graph options - https://visjs.org/docs/graph3d/#Configuration_Options
/*
* Note to dev: xBarWidth = 1 and xStep = 0.5. This means each bar takes up
* 2 'boxes' in the x-direction. xValueLabel function getXValue
* only puts a label on every other 'box', which has the effect of
* putting the label in the middle of the bar. This is purely
* asthetic and can be altered according to your preference/taste.
* Same applies for y-direction.
*/
var options = {
width: '800px',
height: '800px',
style: 'bar',
xBarWidth: 1,
yBarWidth: 1,
showGrid: true,
keepAspectRatio: true,
verticalRatio: 0.5,
xMin: 0,
xMax: 4,
xStep: 0.5,
yMin: 0,
yMax: 6,
yStep: 0.5,
zMin: 0,
zMax: 10,
zStep: 1,
xValueLabel: getXValue,
yValueLabel: getYValue,
zValueLabel: getZValue,
xLabel: "", //subject
yLabel: "", //grade
zLabel: "", //chapters complete
tooltip: getTooltip,
onclick: onClick
};
// create our graph
var container = document.getElementById('mygraph');
graph = new vis.Graph3d(container, data, options);
}
</script>
</head>
<body onload="drawVisualization()">
<div id="mygraph"></div>
</body>
</html>