-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (183 loc) · 8.24 KB
/
index.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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge"> -->
<title>Bar Chart Project</title>
<!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
<link rel="stylesheet" href="assets/css/style.css" />
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"> </script>
</head>
<body>
<header>
<h1>Bar Chart Project</h1>
</header>
<p>This is a page with some examples of the barChart function in order to provide visualization to some given arguments, which will be
presented bellow the charts. </p>
<p>More information, please check
<a href="https://github.com/tonykieling/barChart/blob/master/README.md" target="_blank">README.md</a> file at the GitHub Repository.
<br><br>
<br>
The charts bellow are NOT pictures but real charts rendered when the page is load.</p>
<br>
<p> <h2>1- First example</h2></p>
<p id=barChartPlace1>
<!-- <script src="assets/js/script.js"></script> -->
<script src="assets/js/script1.js"></script>
</p>
<br>
<p>The caller function was set in the follwing way:</p>
<xmp>
10 drawBarChart(
11 // FIRST ARGUMENT - data
12 [100000, 200000, 150000, 350000, 88000, 77000, 89000, 100000],
13
14 // SECOND ARGUMENT - options
15 {
// bigFrame Features:
frameHeight: 400, frameWidth: 800,
setBigFrameColor: "mediumspringgreen", setBigFrameBorder: "solid 0.5px black",
20 // chartFrame features:
setFrameColor: "lavender",
setEmphasis: true,
setBarColor: "peru",
25 // chartLabelFeatures:
chartLabelText: "Historical Biennial Budget for the IT division", chartLabelFontFamily: "times", chartLabelFontSize: 0, chartLabelFontColor: "blue",
chartLabelBorder: "solid grey 0.5px",
// X Axis features:
30 setXLabel: "number", setXLabelStarts: 2004, setXLabelInc: 2,
//it will consider only the numbers passed by the user, regardless whether there is label. The label will be month starting in setXLabelStarts
setColumnsFont: 10, setColumnWithLabel: true, setLabelColumnPos: "over", /*top, bottom, middle and over*/
setSpaceColumn: "small",
35 // Y Axis features
setMaximunValue: 400000,
numberOfDivisionsYAxis: 8, typeOfDivision: "absolute", setDivLabelFontSize: "",
setDivisionsOverColumns: true,
40 },
// THIRD ARGUMENT
// chart position, that is, in what element it's supposed to be placed
"#barChartPlace1"
45 );
</xmp>
<xmp>
Some notes:
1- The Y-axis is set to be absolute and with a maximum value of 400000 (lines 36 and 37).
2- For some user's reason, the divisions are better positioned over the columns (line 38).
3- The X-axis labels are number which were incremented in two at a time, starting in 2004 (line 29).
It could use setXLabel as "month" and setXLabelStarts as the first desired month and the system will fill automatically the other X-labels.
4- The columns' labels were set using "over" position (line 31).
5- The enphasis mode is on (line 21), which allows the column hoved get bigger and has focus, what can help to visualize.
6- The chartLabel was set to has a border (line 26).
</xmp>
<br><br>
<p> <h2>2- Second Example</h2></p>
<p id=barChartPlace2>
<!-- <script src="assets/js/script.js"></script> -->
<script src="assets/js/script2.js"></script>
</p>
<br>
<p>The caller function was set in the follwing way:</p>
<xmp>
10 drawBarChart(
11 // FIRST ARGUMENT
12 // data
13 [[[99, 88, 80, 70], ["North", "South", "East", "West"], ["navy", "olive", "MediumVioletRed ", "teal"], "2014"],
14 [[41, 50, 45, 40], ["North", "South", "East", "West"], ["navy", "olive", "MediumVioletRed", "teal"], "2015"],
15 [[55, 66, 70, 59], ["North", "South", "East", "West"], ["navy", "olive", "MediumVioletRed ", "teal"], "2016"],
[[22, 33, 40, 30], ["North", "South", "East", "West"], ["navy", "olive", "MediumVioletRed ", "teal"], "2017"]],
// SECOND ARGUMENT
20 // chart options
{
// bigFrame Features:
frameHeight: 350, frameWidth: 900,
setBigFrameColor: "mediumspringgreen", setBigFrameBorder: "solid 0.5px black",
25
// chartFrame features:
setFrameColor: "darksalmon",
// setFrameColor: "lightyellow",
setBarColor: "MediumAquamarine", setEmphasis: true,
30
// chartLabelFeatures:
chartLabelText: "Fall Winter (2017/2018) Sales by region", chartLabelFontFamily: "Arial", chartLabelFontSize: 0, chartLabelFontColor: "brown",
chartLabelBorder: "", /*chartLabelBackColor: "red",*/
35 // X Axis features:
setXLabel: "month", setXLabelStarts: "oct", setXLabelInc: 2,
setColumnsFont: 10, setColumnWithLabel: false, setLabelColumnPos: "over", /*top, bottom, middle and over*/
setSpaceColumn: "small",
40 // Y Axis features
setMaximunValue: 120,
numberOfDivisionsYAxis: 8, typeOfDivision: "absolute", setDivLabelFontSize: "", setDivisionsOverColumns: false,
},
45
// THIRD ARGUMENT
// chart position, that is, in what element it's supposed to be placed
"#barChartPlace2"
);
</xmp>
<xmp>
Some notes:
1- The size of the frame has a different size to the others (line 23)
2- There is legend for differenciate multicolumns (data is array of arrays).
3- Because setEmphasis is ON, when hovered the legend color, change the respectivity columns (line 29).
4- The chart will be hold in the #barChartPlace2 id's page (line 48).
5- If the user sets setXLabel (line 36), the label (last item in each array) will be ignored, otherwise, the label will be considered.
6- setColumnWithLabel is OFF, no label (line 37).
</xmp>
<br><br>
<p> <h2>3- Third example</h2></p>
<p id=barChartPlace3>
<!-- <script src="assets/js/script.js"></script> -->
<script src="assets/js/script3.js"></script>
</p>
<br>
<p>The caller function was set in the follwing way:</p>
<xmp>
10 drawBarChart(
11 // FIRST ARGUMENT - data
12 [{"A": 10},
13 {"B": 8},
14 {"C": 14},
15 {"D": 5},
{"E": 9}],
// SECOND ARGUMENT
// chart options
20 {
// bigFrame Features:
frameHeight: 400, frameWidth: 800,
setBigFrameColor: "mediumspringgreen", setBigFrameBorder: "",
25 // chartFrame features:
setFrameColor: "darksalmon",
// setFrameColor: "lightyellow",
setBarColor: "MediumAquamarine", setEmphasis: false,
30 // chartLabelFeatures:
chartLabelText: "Chart Title", chartLabelFontFamily: "Arial", chartLabelFontSize: 0, chartLabelFontColor: "brown",
chartLabelBorder: "",
// X Axis features:
35 setXLabel: "number", setXLabelStarts: 2004, setXLabelInc: 2,
//it will consider only the numbers passed by the user, regardless whether there is label. The label will be month starting in setXLabelStarts
setColumnsFont: 10, setColumnWithLabel: true, setLabelColumnPos: "", /*top, bottom, middle and over*/
setSpaceColumn: "extra",
40 // Y Axis features
setMaximunValue: 0,
numberOfDivisionsYAxis: 4, typeOfDivision: "percent", setDivLabelFontSize: "", setDivisionsOverColumns: false,
},
45
// THIRD ARGUMENT
// chart position, that is, in what element it's supposed to be placed
"#barChartPlace2"
);
</xmp>
<xmp>
Some notes:
1- setEmphasis is OFF (false), which does not give focus in the column (line 28).
2- The space between the columns is set to an extra one (line 38).
3- Because it is a Array of Objects structure, the label set (line 35) is ignored.
4- The division are set as "percent", and 4 parts (line 42).
</xmp>
<footer>
</footer>
</body>
</html>