Skip to content

Commit d0dc6fe

Browse files
simonbrunelsimonbrunel
committed
Add vertical and horizontal scrolling samples
1 parent cccf821 commit d0dc6fe

File tree

6 files changed

+398
-0
lines changed

6 files changed

+398
-0
lines changed

‎.codeclimate.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@ engines:
1212
enabled: true
1313
ratings:
1414
paths:
15+
- "samples/**/*.js"
1516
- "src/**/*.js"
1617
exclude_paths: []

‎samples/deferred-horizontal.html‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Horizontal Scrolling Example | Chart.Deferred.js</title>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js"></script>
6+
<script src="../dist/Chart.Deferred.min.js"></script>
7+
<script src="utils.js"></script>
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
9+
<link rel="stylesheet" type="text/css" href="style.css">
10+
<style>
11+
body {
12+
overflow-x: scroll;
13+
overflow-y: hidden;
14+
}
15+
#wrapper {
16+
display: table;
17+
height: 100%;
18+
left: 100%;
19+
margin-left: -320px;
20+
vertical-align: middle;
21+
white-space: nowrap;
22+
}
23+
#wrapper > div {
24+
display: table-cell;
25+
}
26+
#wrapper .head,
27+
#wrapper .foot {
28+
padding-right: 128px;
29+
vertical-align: middle;
30+
}
31+
#wrapper .head {
32+
text-align: right;
33+
}
34+
</style>
35+
</head>
36+
<body>
37+
<div id="start"></div>
38+
<div id="header">
39+
<h1>Chart.Deferred.js</h1>
40+
<h2><b>Horizontal</b> Scrolling Example</h2>
41+
<a class="btn" href="index.html"><i class="fa fa-chevron-left"></i></a>
42+
<a class="btn btn-style_1" href="https://github.com/chartjs/Chart.Deferred.js#configuration"><i class="fa fa-book"></i> Documentation</a>
43+
</div>
44+
<div id="wrapper">
45+
<div class="head">Scroll right <i class="fa fa-chevron-circle-right"></i></div>
46+
<div class="chart"><code id="config_0"></code><canvas id="canvas_0" height="320" width="512"></canvas></div>
47+
<div class="chart"><code id="config_1"></code><canvas id="canvas_1" height="320" width="512"></canvas></div>
48+
<div class="chart"><code id="config_2"></code><canvas id="canvas_2" height="320" width="512"></canvas></div>
49+
<div class="chart"><code id="config_3"></code><canvas id="canvas_3" height="320" width="512"></canvas></div>
50+
<div class="chart"><code id="config_4"></code><canvas id="canvas_4" height="320" width="512"></canvas></div>
51+
<div class="foot"><a class="button" href="#start" onclick="restart()"> <i class="fa fa-refresh"></i> Restart</a></div>
52+
</div>
53+
54+
<script>
55+
var configs = [
56+
{ deferred: false },
57+
{ deferred: { enabled: true }},
58+
{ deferred: { xOffset: 100 }},
59+
{ deferred: { delay: 500 }},
60+
{ deferred: { xOffset: '50%', delay: 250 }}
61+
];
62+
63+
window.onload = function() {
64+
var options = Samples.utils.defaultBarOptions();
65+
var data = Samples.utils.generateBarData();
66+
for (i = 0, ilen = configs.length; i<ilen; ++i) {
67+
var text = document.getElementById("config_" + i);
68+
var canvas = document.getElementById("canvas_" + i);
69+
70+
text.textContent = 'options: ' + JSON.stringify(configs[i], null, ' ');
71+
72+
new Chart(canvas.getContext("2d"), {
73+
type: [ 'bar' ][i%1],
74+
options: Chart.helpers.extend(options, configs[i]),
75+
data: data
76+
});
77+
}
78+
};
79+
80+
function restart() {
81+
setTimeout(function() {
82+
location.reload();
83+
});
84+
}
85+
</script>
86+
</body>
87+
</html>

‎samples/deferred-vertical.html‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Vertical Scrolling Example | Chart.Deferred.js</title>
5+
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.5/Chart.bundle.min.js"></script>
6+
<script src="../dist/Chart.Deferred.min.js"></script>
7+
<script src="utils.js"></script>
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
9+
<link rel="stylesheet" type="text/css" href="style.css">
10+
<style>
11+
body {
12+
overflow-x: hidden;
13+
overflow-y: scroll;
14+
}
15+
#wrapper {
16+
width: 100%;
17+
top: 100%;
18+
position: absolute;
19+
margin-top: -144px;
20+
}
21+
#wrapper > div {
22+
margin: 0 auto;
23+
vertical-align: middle;
24+
}
25+
#wrapper .head,
26+
#wrapper .foot {
27+
text-align: center;
28+
padding-bottom: 128px;
29+
}
30+
</style>
31+
</head>
32+
<body>
33+
<div id="start"></div>
34+
<div id="header">
35+
<h1>Chart.Deferred.js</h1>
36+
<h2><b>Vertical</b> Scrolling Example</h2>
37+
<a class="btn" href="index.html"><i class="fa fa-chevron-left"></i></a>
38+
<a class="btn btn-style_1" href="https://github.com/chartjs/Chart.Deferred.js#configuration"><i class="fa fa-book"></i> Documentation</a>
39+
</div>
40+
<div id="wrapper">
41+
<div class="head">Scroll down <i class="fa fa-chevron-circle-down"></i></div>
42+
<div class="chart"><code id="config_0"></code><canvas id="canvas_0" height="320" width="512"></canvas></div>
43+
<div class="chart"><code id="config_1"></code><canvas id="canvas_1" height="320" width="512"></canvas></div>
44+
<div class="chart"><code id="config_2"></code><canvas id="canvas_2" height="320" width="512"></canvas></div>
45+
<div class="chart"><code id="config_3"></code><canvas id="canvas_3" height="320" width="512"></canvas></div>
46+
<div class="chart"><code id="config_4"></code><canvas id="canvas_4" height="320" width="512"></canvas></div>
47+
<div class="foot"><a class="button" href="#start" onclick="restart()"> <i class="fa fa-refresh"></i> Restart</a></div>
48+
</div>
49+
50+
<script>
51+
var configs = [
52+
{ deferred: false },
53+
{ deferred: { enabled: true }},
54+
{ deferred: { yOffset: 100 }},
55+
{ deferred: { delay: 500 }},
56+
{ deferred: { yOffset: '50%', delay: 250 }}
57+
];
58+
59+
window.onload = function() {
60+
var options = Samples.utils.defaultBarOptions();
61+
var data = Samples.utils.generateBarData();
62+
for (i = 0, ilen = configs.length; i<ilen; ++i) {
63+
var text = document.getElementById("config_" + i);
64+
var canvas = document.getElementById("canvas_" + i);
65+
66+
text.textContent = 'options: ' + JSON.stringify(configs[i], null, ' ');
67+
68+
new Chart(canvas.getContext("2d"), {
69+
type: [ 'bar' ][i%1],
70+
options: Chart.helpers.extend(options, configs[i]),
71+
data: data
72+
});
73+
}
74+
};
75+
76+
function restart() {
77+
setTimeout(function() {
78+
location.reload();
79+
});
80+
}
81+
</script>
82+
</body>
83+
</html>

‎samples/index.html‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Examples | Chart.Deferred.js</title>
5+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
6+
<link rel="stylesheet" type="text/css" href="style.css">
7+
<style>
8+
#wrapper {
9+
margin: 136px 24px;
10+
}
11+
</style>
12+
</head>
13+
<body>
14+
<div id="start"></div>
15+
<div id="header">
16+
<h1>Chart.Deferred.js | Examples</h1>
17+
<h2>A Chart.js plugin to defer initial chart update.</h2>
18+
<a class="btn btn-style_1" href="https://github.com/chartjs/Chart.Deferred.js#configuration"><i class="fa fa-book"></i> Documentation</a>
19+
<a class="btn btn-style_2" href="http://www.chartjs.org"><i class="fa fa-globe"></i> Website</a>
20+
<a class="btn btn-style_3" href="https://github.com/chartjs/Chart.Deferred.js"><i class="fa fa-github"></i> GitHub</a>
21+
</div>
22+
<div id="wrapper">
23+
<a class="sample" href="deferred-vertical.html">
24+
<div class="fa fa-chevron-circle-down"></div>
25+
<div><b>Vertical</b> Scrolling</div>
26+
</a>
27+
<a class="sample" href="deferred-horizontal.html">
28+
<div class="fa fa-chevron-circle-right"></div>
29+
<div><b>Horizontal</b> Scrolling</div>
30+
</a>
31+
</div>
32+
</body>
33+
</html>

‎samples/style.css‎

Lines changed: 147 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,147 @@
1+
html, body {
2+
color: #aaa;
3+
font-family: Arial, sans-serif;
4+
height: 100%;
5+
padding: 0;
6+
margin: 0;
7+
}
8+
9+
code, .btn, #wrapper > .sample {
10+
-webkit-border-radius: 4px;
11+
-moz-border-radius: 4px;
12+
border-radius: 4px;
13+
}
14+
15+
.btn, #wrapper > .sample {
16+
-webkit-transition: background-color 0.25s ease-in;
17+
-o-transition: background-color 0.25s ease-in;
18+
transition: background-color 0.25s ease-in;
19+
}
20+
21+
a {
22+
color: #4BC0C0;
23+
text-decoration: none;
24+
}
25+
26+
code {
27+
display: inline-block;
28+
background-color: #f7f7f7;
29+
border: 1px solid #f0f0f0;
30+
color: #555;
31+
padding: 10px 20px;
32+
margin: 16px;
33+
}
34+
35+
canvas {
36+
-moz-user-select: none;
37+
-webkit-user-select: none;
38+
-ms-user-select: none;
39+
}
40+
41+
.btn {
42+
background-color: #f0f0f0;
43+
color: #505050;
44+
display: inline-block;
45+
padding: 2px 8px 2px 6px;
46+
}
47+
48+
.btn:hover { background-color: #e0e0e0 }
49+
50+
.btn-style_1 { background-color: #36A2EB; color: white; }
51+
.btn-style_2 { background-color: #4BC0C0; color: white; }
52+
.btn-style_3 { background-color: #808080; color: white; }
53+
54+
.btn-style_1:hover { background-color: #2B81BC }
55+
.btn-style_2:hover { background-color: #3C9999 }
56+
.btn-style_3:hover { background-color: #505050 }
57+
58+
59+
#header {
60+
background-color: #fcfcfc;
61+
background-image: url('http://www.chartjs.org/img/chartjs-logo.svg');
62+
background-repeat: no-repeat;
63+
background-position: 16px center;
64+
background-size: auto 88px;
65+
border-bottom: 4px solid #f5f5f5;
66+
line-height: 1.4;
67+
padding: 16px 16px 16px 120px;
68+
position: fixed;
69+
width: 100%;
70+
z-index: 999;
71+
}
72+
73+
#header h1,
74+
#header h2 {
75+
margin: 0;
76+
}
77+
78+
#header h1 {
79+
color: #888;
80+
font-size: 1.4em;
81+
font-weight: bold;
82+
}
83+
84+
#header h2 {
85+
font-size: 1em;
86+
font-weight: normal;
87+
margin-bottom: 4px;
88+
}
89+
90+
#header a {
91+
font-size: 0.9em;
92+
}
93+
94+
#wrapper {
95+
position: absolute;
96+
}
97+
98+
#wrapper > .head {
99+
color: #ccc;
100+
font-size: 1.4em;
101+
text-align: right;
102+
text-transform: uppercase;
103+
}
104+
105+
#wrapper > .chart {
106+
min-width: 512px;
107+
max-width: 512px;
108+
padding: 64px 96px;
109+
text-align: center;
110+
vertical-align: middle;
111+
}
112+
113+
#wrapper > .foot {
114+
padding: 64px;
115+
color: #aaf;
116+
font-size: 1.4em;
117+
text-decoration: none;
118+
text-transform: uppercase;
119+
text-align: center;
120+
}
121+
122+
#wrapper > .sample {
123+
display: inline-block;
124+
background-color: #f8f8f8;
125+
margin: 0 16px 16px 0;
126+
padding-right: 16px;
127+
width: 256px;
128+
}
129+
130+
#wrapper > .sample:hover {
131+
background-color: #f0f0f0;
132+
}
133+
134+
#wrapper > .sample > div {
135+
display: inline-block;
136+
vertical-align: middle;
137+
}
138+
139+
#wrapper > .sample > .fa {
140+
border-right: 1px dotted #e0e0e0;
141+
display: inline-block;
142+
font-size: 4em;
143+
margin-right: 16px;
144+
padding: 16px;
145+
}
146+
147+

0 commit comments

Comments
 (0)