forked from darkewiser/iCanvas
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathSVG_Demo.html
106 lines (88 loc) · 3.8 KB
/
SVG_Demo.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
103
104
105
106
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body {
background-color:darkgreen;
}
</style>
<script src="framework/iCanvas_v1_2_1.js"></script>
<script src="ctrls/ctrls.js"></script>
<script type="text/javascript">
window.onload = function () {
var wrapper = iCanvas.createWrapper("container");
//establish ctrl instances
var _back = iCanvas.ctrls.rect(wrapper, 100, 100, 0, 0, "white");
var _header = iCanvas.ctrls.rect(wrapper, 100, 10, 0, 0, "#f0f0f0");
var _switchLine = iCanvas.ctrls.rect(wrapper, 100, 6, 0, 0, "#7e7e7e");
var _floatLayer = iCanvas.ctrls.rect(wrapper, 30, "100+1px", 0, 0, "white");
var _btnLeft = iCanvas.ctrls.rect(wrapper, 30, 100, 0, 0, "transparent");
var _btnRight = iCanvas.ctrls.rect(wrapper, 30, 100, 0, 0, "transparent");
var _qTxt = iCanvas.ctrls.txt(wrapper, 50, 50, "Quarterly");
var _yTxt = iCanvas.ctrls.txt(wrapper, 50, 50, "Year To Date");
var _axisBack = iCanvas.ctrls.rect(wrapper, 100, 84, 0, 0, "white");
var _axis = new axis(wrapper, 100, 90, 0, 10,"yellow");
_axis.applyRange(24, 0);
_axis.setLineCount(4);
_axis.applyBoundary(6, 95, 5, 95, 6, 78);
_axis.applyXLabs("Q113");
_axis.applyXLabs("Q213");
_axis.applyXLabs("Q313");
_axis.applyXLabs("Q413");
var _bars = new bars(wrapper,100,100,0,0);
_bars.applyAxis(_axis);
_bars.applyColors("#00b193","#008e76");
_bars.applySingleValue("Q113", 8);
_bars.applySingleValue("Q213", 9);
_bars.applySingleValue("Q313", 5);
_bars.applySingleValue("Q413", 6);
var _line = new PathLine(wrapper, 100, 100, 0, 0, "#ffd800");
_line.applyAxis(_axis);
_line.applySingleValue("Q113", 17);
_line.applySingleValue("Q213", 19);
_line.applySingleValue("Q313", 20);
_line.applySingleValue("Q413", 22);
var _pushPin = new PushPin(wrapper, 10, 80, 90.4, 10, "transparent");
_pushPin.applyBorder("#7e7e7e", 1.1);
//set basic properties
_floatLayer.setPosition("absolute");
_btnRight.setFloat("left");
_yTxt.applyFontColor("white");
_header.appendChild(_pushPin);
//build ctrl hierachies
_back.appendChild(_header);
_back.appendChild(_switchLine);
_back.appendChild(_axisBack);
_axisBack.appendChild(_axis);
_switchLine.appendChild(_floatLayer);
_switchLine.appendChild(_btnLeft);
_switchLine.appendChild(_btnRight);
_btnLeft.appendChild(_qTxt);
_btnRight.appendChild(_yTxt);
wrapper.initRoot(_back);
wrapper.render();
document.getElementById("zin").onclick = function () {
wrapper.changeWH(-5, -5);
wrapper.render();
}
document.getElementById("zout").onclick = function () {
wrapper.changeWH(5, 5);
wrapper.render();
}
var _tool = iCanvas.getTools();
var _txt = _tool.RPN("4+6px*{5}-((3+1)*2)");
document.getElementById("exp").value=_txt.join("");
}
</script>
<title></title>
</head>
<body>
<input type="button" value="Zoom In" id="zin"/>
<input type="button" value="Zoom Out" id="zout"/>
<input type="text" id="exp"/>
<div>
<svg width="420px" height="336px" version="1.1" id="container">
</svg>
</div>
</body>
</html>