-
Notifications
You must be signed in to change notification settings - Fork 1
/
simple.html
176 lines (174 loc) · 12.1 KB
/
simple.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<link rel="icon" href="resources/favicon.svg" />
<title>Open Innovations Line Chart Library</title>
<script src="oi.linechart.min.js"></script>
<style>
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1em; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* apply a natural box layout model to all elements */
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
/* End of reset */
/* Main site styling */
body {
background-color: #000000;
font-family: "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-size: 16px;
color: #efefef;
margin: 0px;
padding: 0px;
line-height: 1.44em;
text-rendering: optimizeLegibility;
}
#main { background-color: #ffffff; color: #333333; }
.holder { position: relative; width: 1080px; max-width: 100%; margin: auto; }
.padded { padding: 1em; }
h1 { font-size: 1.7em; margin-top: 1em; font-weight: 600; margin: 0; }
h2 { font-size: 1.7em; margin-top: 1.7647058823529411em; font-weight: 500; }
h3 { font-size: 1.4em; margin-top: 1.428571em; }
h1:first-child, h2:first-child, h3:first-child { margin-top: 0; }
footer { width: 100%; padding: 1em; padding-bottom: 3em; }
footer a, footer a:visited { color: inherit; }
section.example {
border-top: 1px solid #999;
margin-top: 4em;
padding-top: 4em;
}
h2 + *, h3 + * { margin-top: 1em; }
p + * { margin-top: 2em; }
section.example h2 + * { margin-top: 1em; }
.howto { margin-top: 1em; }
body { background: black; color: white; }
</style>
</head>
<body class="b1-bg">
<header>
<div class="b1-bg padded">
<div class="holder" style="text-align:center;">
<a href="https://odileeds.org/" aria-label="ODI Leeds">
<svg version="1.1" viewBox="0 0 250 91" width="250" height="91" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<g transform="translate(0,-961.4)">
<circle cx="65.42" cy="1006.6" r="15.714" fill-opacity=".5"/>
<rect x="87.92" y="1001.7" width="35.179" height="10" fill-opacity=".5"/>
<path d="m86.07 966.9c-2.1 0.15-3.94 0.56-6.06 0.7 0.92 8.34 2.24 17.03 3.38 25.73-3.07-6.04-5.86-12.38-8.96-18.39-1.91 0.77-3.63 1.73-5.48 2.56 2.9 6.1 5.89 12.12 8.74 18.28 0.14 0 0.1 0.17 0 0-4-3.96-7.74-8.18-11.76-12.11-1.58 1.26-2.862 2.81-4.428 4.07 1.016 1.14 2.056 2.25 3.108 3.36h0.72c8.53 0 15.44 6.95 15.44 15.5 0 8.6-6.93 15.5-15.44 15.5-1.13 0-2.251-0.1-3.349-0.4-3.266 1.6-6.509 3.1-9.68 4.8 0.877 1.8 1.828 3.5 2.563 5.5 5.877-2.8 11.976-5.9 17.696-8.4-0.15 0.6-1.89 1.2-1.86 1.9 0 0 0.87 0.8 1.05 1 1.04 1.1 2.4 2.6 3.26 3.3 0.69-0.6 1.31-1.3 1.98-1.9-0.81 1.6-1.71 3.2-2.56 4.8 1.8 1 3.57 2 5.47 2.9 1.24-2.4 2.54-4.8 3.84-7.1 0-0.1 0-0.2 0.12-0.2 0 0 0 0.2-0.12 0.2-0.84 5.6-2.05 10.9-2.91 16.5 2.08 0.3 4 0.8 6.06 1.1 0.66-3.8 1.28-7.7 2.09-11.3 0.1 1.2 0.24 1.7 0.35 2.9 2.03-0.3 4.08-0.5 6.06-0.8-0.1-2-0.73-4-0.59-5.7 2.4 5.3 5.03 10.4 7.46 15.7 1.98-0.8 3.83-1.7 5.59-2.7-2.6-5.2-5.09-10.4-7.57-15.7-0.14 0-0.1-0.2 0 0 4.66 4.6 9.02 9.6 13.74 14.2 1.55-1.3 2.96-2.8 4.42-4.2-4.52-4.6-9.3-9.6-13.51-14.2 0.75 0.3 1.28 0.8 2.1 1 1.03-1.7 1.99-3.5 2.91-5.3-0.71-0.5-1.56-0.8-2.21-1.3 2.16 0.4 4.32 0.8 6.52 1.2 0.3-2.1 0.73-4 1.05-6.1-2.1-0.4-4.49-0.5-6.29-1.3 3.84-0.4 7.63-0.9 11.41-1.4h-32.51v-9.1h28.21c-0.84-1.7-1.57-3.42-2.45-5.03-2.66 1.26-5.35 2.49-7.92 3.83-0.1-0.4 0.42-0.8 0.7-1.03 5.31-5.2 11.31-10.6 16.65-15.85-1.18-1.72-2.8-3.01-4.19-4.53-5.91 5.7-11.84 11.37-17.82 17 0 0.14-0.17 0.1 0 0 3.24-6.2 6.59-12.28 9.9-18.4-1.65-1.14-3.63-1.96-5.36-3.02-2.9 5.32-5.85 10.6-8.61 16.06 0.17-2.26 0.84-5.05 1.28-7.45-1.89-0.48-3.99-0.75-5.94-1.16-1.03 4.1-1.69 8.56-2.45 12.92-1.44-9.51-2.68-19.11-3.84-28.41zm-37.376 34.8c-0.605 1.6 0.114 3.8-0.408 5.5v0.7c0.822 0.1 0.88 0.2 1.701 0.3-0.06-0.5-0.1-1.1-0.108-1.6 0-1.5 0.235-3 0.68-4.5-0.619-0.2-1.25-0.3-1.865-0.4zm80.696 2c-1.88 0.2-3.74 0.4-5.59 0.7v6.2c2.1-0.3 3.68-0.7 5.78-1v-1c-0.32-1.6 0-3.2-0.19-4.9zm-75.927 12.8c0.156 1.2 0.308 2.4 0.469 3.5 1.004-0.1 2.015-0.2 3.028-0.4-1.315-0.8-2.494-1.9-3.497-3.1z" clip-rule="evenodd" fill="#67E767" fill-rule="evenodd"/>
<path d="m65.39 989.07c-4.711 0-9.141 1.84-12.473 5.17-3.333 3.33-5.168 7.76-5.168 12.46s1.835 9.1 5.168 12.5c3.332 3.3 7.762 5.1 12.473 5.1 4.71 0 9.14-1.8 12.48-5.1 1.72-1.7 3.03-3.8 3.91-6v10.9h14.98c2.59 0 5.02-0.4 7.22-1.3 2.17-0.8 4.07-2 5.66-3.5 1.77-1.7 3.08-3.7 3.92-6v10.8h16.52v-34.76h-16.52v10.76c-0.84-2.29-2.15-4.34-3.92-6.03-1.58-1.52-3.49-2.7-5.66-3.51-2.2-0.82-4.63-1.23-7.22-1.23h-14.98v10.87c-0.88-2.22-2.19-4.24-3.91-5.96-3.34-3.33-7.77-5.17-12.48-5.17zm0 2.82c8.19 0 14.82 6.64 14.82 14.81 0 8.2-6.63 14.8-14.82 14.8-8.186 0-14.821-6.6-14.821-14.8 0-8.17 6.635-14.81 14.821-14.81zm-3.093 10.81c-0.588 0-1.057 0.1-1.404 0.3-0.349 0.2-0.614 0.5-0.799 0.8-0.186 0.4-0.309 0.8-0.359 1.3s-0.08 1-0.08 1.6 0.02 1.2 0.08 1.7c0.05 0.4 0.174 0.9 0.359 1.2 0.185 0.4 0.448 0.7 0.799 0.8 0.346 0.2 0.815 0.3 1.404 0.3 0.586 0 1.053-0.1 1.403-0.3 0.35-0.1 0.62-0.4 0.8-0.8 0.19-0.3 0.3-0.8 0.36-1.2 0-0.5 0.1-1.1 0.1-1.7s0-1.1-0.1-1.6-0.17-0.9-0.36-1.3c-0.18-0.3-0.45-0.6-0.8-0.8s-0.817-0.3-1.403-0.3zm-9.379 0.1v7.8h1.436v-5.4h0.02l1.916 5.4h1.785v-7.8h-1.438v5.4h-0.02l-1.895-5.4h-1.807zm13.672 0v7.8h2.47c0.53 0 0.96-0.1 1.3-0.2 0.34-0.2 0.61-0.4 0.81-0.8 0.21-0.3 0.33-0.7 0.43-1.2 0.13-0.5 0.13-1.1 0.13-1.8 0-0.6 0-1.1-0.1-1.5-0.1-0.5-0.19-0.9-0.37-1.2-0.19-0.4-0.45-0.6-0.78-0.8-0.34-0.2-0.77-0.3-1.32-0.3zm6.82 0v7.8h4.45v-1.3h-2.88v-2.1h2.61v-1.3h-2.61v-1.8h2.78v-1.3zm-11.113 1c0.231 0 0.419 0.1 0.559 0.2 0.141 0.1 0.246 0.3 0.326 0.5 0.07 0.2 0.124 0.5 0.154 0.9s0.04 0.8 0.04 1.3-0.01 1-0.04 1.4c-0.03 0.3-0.07 0.6-0.154 0.8-0.08 0.3-0.184 0.4-0.326 0.5-0.14 0.2-0.328 0.2-0.559 0.2-0.235 0-0.419 0-0.56-0.2-0.143-0.1-0.248-0.2-0.328-0.5-0.07-0.2-0.133-0.5-0.153-0.8-0.03-0.4-0.04-0.9-0.04-1.4s0-0.9 0.04-1.3c0.02-0.4 0.07-0.7 0.153-0.9 0.08-0.2 0.185-0.4 0.328-0.5 0.141-0.1 0.326-0.2 0.56-0.2zm5.863 0.2h0.66c0.3 0 0.54 0 0.72 0.2 0.17 0.1 0.3 0.2 0.4 0.5 0.1 0.2 0.18 0.5 0.18 0.8v1.2 1.3c0 0.3-0.1 0.6-0.19 0.8-0.1 0.3-0.23 0.4-0.4 0.5s-0.39 0.2-0.66 0.2h-0.7v-5.5z" fill="#fff"/>
<g fill="#fff" stroke-width="1px">
<path d="m140.66 999.78v13.82h9.78v-2.5h-6.74v-11.32h-3.04z"/>
<path d="m152.12 999.78v13.82h10.5v-2.5h-7.46v-3.4h6.71v-2.4h-6.71v-3h7.31v-2.52h-10.35z"/>
<path d="m164.65 999.78v13.82h10.5v-2.5h-7.46v-3.4h6.7v-2.4h-6.7v-3h7.3v-2.52h-10.34z"/>
<path d="m180.22 1011.1v-8.8h2.17q1.12 0 1.88 0.4 0.77 0.3 1.24 0.9 0.46 0.6 0.65 1.4 0.22 0.9 0.22 1.9 0 1.2-0.29 1.9-0.29 0.8-0.78 1.3-0.48 0.5-1.1 0.7-0.62 0.3-1.28 0.3h-2.71zm-3.05-11.32v13.82h5.97q1.59 0 2.75-0.5 1.18-0.6 1.96-1.5 0.79-0.9 1.18-2.2t0.39-2.8q0-1.7-0.49-3-0.46-1.3-1.31-2.1-0.84-0.9-2-1.3-1.14-0.42-2.48-0.42h-5.97z"/>
<path d="m193.55 1009h-2.94q-0 1.3 0.46 2.2 0.49 1 1.3 1.6 0.83 0.6 1.9 0.8 1.08 0.3 2.23 0.3 1.41 0 2.48-0.3 1.08-0.3 1.8-0.9 0.73-0.6 1.1-1.4t0.37-1.8q0-1.2-0.5-1.9-0.49-0.8-1.17-1.2-0.67-0.4-1.37-0.6-0.68-0.2-1.07-0.3-1.29-0.4-2.11-0.6-0.79-0.2-1.26-0.4-0.44-0.2-0.6-0.5-0.15-0.2-0.15-0.6 0-0.5 0.19-0.8 0.19-0.2 0.48-0.4 0.31-0.2 0.68-0.3t0.74-0.1q0.56 0 1.03 0.1 0.48 0.1 0.85 0.3 0.37 0.3 0.58 0.7 0.23 0.4 0.27 1h2.95q0-1.2-0.47-2-0.44-0.9-1.22-1.4-0.77-0.57-1.78-0.8-0.99-0.25-2.08-0.25-0.93 0-1.86 0.25t-1.66 0.8q-0.74 0.5-1.2 1.3-0.45 0.8-0.45 1.8t0.35 1.7q0.37 0.6 0.95 1.1 0.58 0.4 1.32 0.7 0.73 0.3 1.51 0.5 0.75 0.2 1.49 0.4 0.74 0.1 1.32 0.4 0.58 0.2 0.93 0.5 0.37 0.4 0.37 1 0 0.5-0.28 0.8-0.27 0.4-0.67 0.5-0.41 0.2-0.88 0.3-0.46 0.1-0.87 0.1-0.6 0-1.16-0.2-0.56-0.1-0.99-0.4-0.4-0.3-0.66-0.8-0.25-0.5-0.25-1.2z"/>
</g>
</g>
</svg></a>
<h1>Line Chart Library - Test</h1>
</div>
</div>
</header>
<div id="main" class="padded">
<div class="holder">
<style>
#chart { height: 400px; width: 100%; margin: 1em auto; position: relative; animation-duration: 0.3s; background: #efefef; padding: 2em; }
/* Define the tooltip */
.linechart-tooltip { background: black; color: white; padding: 0.25em 0.5em; margin-top: -1em; transition: left 0.1s linear, top 0.1s linear; border-radius: 4px; white-space: nowrap; }
.linechart-tooltip::after { content: ''; position: absolute; bottom: auto; width: 0; height: 0; border: 0.5em solid transparent; left: 50%; top: 100%; transform: translate3d(-50%,0,0); border-color: transparent; border-top-color: black; }
</style>
<div id="chart"></div>
<script>
OI.ready(function(){
monthslong = ['January','February','March','April','May','June','July','August','September','October','November','December'];
months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
chart = OI.linechart(document.getElementById('chart'),{
'left':50,
'right':10,
'top':10,
'bottom':24,
// Draw a key
'key':{ 'show':true },
// Define the axes
'axis':{
'x':{
'line': {'show':true},
'labels':{
1: {'label':months[0]},
2: {'label':months[1]},
3: {'label':months[2]},
4: {'label':months[3]},
5: {'label':months[4]},
6: {'label':months[5]},
7: {'label':months[6]},
8: {'label':months[7]},
9: {'label':months[8]},
10: {'label':months[9]},
11: {'label':months[10]},
12: {'label':months[11]}
}
},
'y':{
'line': {'show':false,'stroke-width':2},
'grid': {'show':true},
'title': { 'label': 'Temperature °C' },
'labels':{
0: {'label':0},
5: {'label':5},
10: {'label':10},
15: {'label':15},
20: {'label':20}
}
}
}
});
// A function to create the contents of a tooltip
function label(d){ return ''+d.series.title+'\n'+monthslong[d.i]+': '+d.data.y.toFixed(2)+'°C'; }
// Create some data
var maxtemp = [{x:1,y:6.4},{x:2,y:7},{x:3,y:9.1},{x:4,y:11.9},{x:5,y:14.8},{x:6,y:17.5},{x:7,y:19.6},{x:8,y:19},{x:9,y:16.9},{x:10,y:13.3},{x:11,y:9.1},{x:12,y:6.7}];
var mintemp = [{x:1,y:1.8},{x:2,y:1.4},{x:3,y:2.2},{x:4,y:3.9},{x:5,y:7},{x:6,y:9.9},{x:7,y:12.1},{x:8,y:12},{x:9,y:10.1},{x:10,y:7.6},{x:11,y:4.3},{x:12,y:2.2}];
// Add the data to the chart
chart.addSeries(maxtemp,{
'title': 'Max temperature',
'points':{ 'size':4, 'color': '#FF6700' },
'line':{ 'color': '#FF6700' },
'tooltip':{ 'label': label }
});
chart.addSeries(mintemp,{
'title': 'Min temperature',
'points':{ 'size':4, 'color': '#2254F4' },
'line':{ 'color': '#2254F4' },
'tooltip':{ 'label': label }
});
chart.draw();
});
</script>
<p>This is a basic example of our small, standalone, line-chart library.</p>
</div>
</div>
<footer>
<div class="holder">
<p>© 2021 <a href="https://odileeds.org/" target="_parent">ODI Leeds</a> (<a href="https://creativecommons.org/licenses/by/4.0/" target="_parent">CC BY</a>).</p>
</div>
</footer>
<script src="https://open-innovations.org/resources/oi.log.js"></script>
<script>
OI.log.setup({'id':'odileeds','target':['open-innovations.github.io','odileeds.github.io']}).add('action=view');
</script>
</body>
</html>