-
Notifications
You must be signed in to change notification settings - Fork 0
/
demo.html
444 lines (386 loc) · 13.5 KB
/
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
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
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>simpleCharts.js</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script type="text/javascript" src="raphael.min.js"></script>
<script type="text/javascript" src="simpleCharts.min.js"></script>
<style type="text/css">
.canvas{
border: 1px solid #aaa;
width:50%;
margin:auto;
}
pre{
font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif;
margin-bottom: 10px;
overflow: auto;
width: auto;
padding: 5px;
background-color: #eee;
width: 650px!ie7;
padding-bottom: 20px!ie7;
max-height: 600px;
}
</style>
</head>
<body>
<div style="max-width:1000px;margin:auto">
<h1>
Simple Chart js
</h1>
<h3>
A set of hight customizable charts
</h3>
<div id="canvas1" class="canvas"></div>
<br/>
<br/>
<div id="canvas2" class="canvas"></div>
<br/>
<br/>
<div id="canvas3" class="canvas"></div>
<br/>
<br/>
<div id="canvas4" class="canvas"></div>
<br/>
<br/>
<div id="canvas5" class="canvas"></div>
<br/>
<br/>
<div id="canvas6" class="canvas"></div>
<br/>
<br/>
<div>
<h2>Responsive</h2>
<p>
To make any SimpleCharts responsive, use the chart loader function instead of the new operator:
</p>
<pre>
<code>
chartLoader('chartName', data);
//example:
chartLoader('Columns', data);
</code>
</pre>
<p>
data is the object that holds the settings and data for the chart. This can be an object
or a string that can be parsed as an object
</p>
<p>
<b>Note</b>: This functionality will work as far as the HTML container for the chart is
responsive.
</p>
<h2>Settings</h2>
<p>
General structure for the object used to make a chart. Depending on the chart type,
some settings might vary.
</p>
<pre>
<code>
var objData={
canvasID : 'ID of the canvas container',
chartType:'bars/bubbles/columns/lines/donut/sunburst',
gridSettings:{...},
title:{text:'Title for the chart', align:'left/center/right', font:{...}},
subTitle:{text:'Subtitle for the chart', align:'left/center/right', font:{...}},
axisTitles : {yTitle:'Title for the vertical axe', xTitle: 'Title for the horizontal axe', font:{...}},
keys : {position:'left/top/right/bottom', align:'left/right/center', font:{...}},
additionalInfo: [
{position:'top/bottom', align:'left/right/center', content:'sdfsdfsdf', font:{...}},
],
labels: [...],
dataSet : [...],
};
</code>
</pre>
<p>
The font property for the properties: title, subTitle, axisTitles, keys, and additionalInfo
has the following format:
</p>
<pre>
<code>
{fill:'#000000', 'font-size':22, 'font-style':'normal','font-weight':'bold', 'font-family': "myFontFamily"}
</code>
</pre>
<p>
General properties for the gridSettings property. Depending on the type of chart, additional
settings will be used.
</p>
<pre>
<code>
gridSettings:{
bgColor:'#ffffff',
scaleColor : '#0000ff',
labelColor : '#666666',
scaleFontSize : 12,
scaleArea:45,
mxDecimals:2,
'font-family' : "Arial, sans-serif",
popUpA:{'maxWidth':200, paddingX:5, paddingY:5, justifyContent:'left', fill:'#ffffff', stroke:'#a1a1a1', 'stroke-width': 0.5, font:{fill:'#ff88ee', 'font-size':14, 'font-style':'normal', 'font-weight':'normal', 'font-family':'myFontFamily'}},
popUpB:{'maxWidth':300, paddingX:5, paddingY:5, justifyContent:'left', fill:'#000000', stroke:'#a1a1a1', 'stroke-width': 0, font:{fill:'#ffffff', 'font-size':12, 'font-style':'normal', 'font-weight':'normal', 'font-family':'anotherFavouriteFontFamily'}},
}
</code>
</pre>
<table>
<tr><td>bgColor</td><td>the color of the canvas, default '#ffffff'</td></tr>
<tr><td>scaleColor</td><td>color for the scale, default '#0000ff'</td></tr>
<tr><td>labelColor </td><td>color for the font of the scale, default '#666666'</td></tr>
<tr><td>scaleFontSize</td><td>scale font size, default 12</td></tr>
<tr><td>scaleArea</td><td>the width of space for the scale, default 45</td></tr>
<tr><td>mxDecimals</td><td>the maximum number of decimal used for numeric values in the pop up, default 2</td></tr>
<tr><td>'font-family'</td><td>font use across all the text in the chart, however this can be set for particular parts of the chart.
Default "Arial, sans-serif"</td></tr>
<tr><td>popUpA</td><td>settings for the popUp for the category text, if the category text is too wide to fit in the area allocated for it, it is set in a popUp, default {'maxWidth':200, paddingX:5, paddingY:5, justifyContent:'left', fill:'#ffffff', stroke:'#a1a1a1', 'stroke-width': 0.5, font:{fill:'#ff88ee', 'font-size':14, 'font-style':'normal', 'font-weight':'normal', 'font-family':''}},</td></tr>
<tr><td>popUpB</td><td>settings for the popUp that will hold the description of the records, default {'maxWidth':300, paddingX:5, paddingY:5, justifyContent:'left', fill:'#000000', stroke:'#a1a1a1', 'stroke-width': 0, font:{fill:'#ffffff', 'font-size':12, 'font-style':'normal', 'font-weight':'normal', 'font-family':''}}, </td></tr>
</table>
<h2>Additional settings to be included in gridSettings</h2>
<h3>Bars</h3>
<pre>
<code>
rowHeight : 30,
categoryFontSize : 12,
categoryBoxWidth : 60,
barThickness : 14,
speed : 500,
</code>
</pre>
<table>
<tr><td>rowHeight</td><td>the line height of the category, default 30</td></tr>
<tr><td>categoryBoxWidth</td><td>the max width for the category text, default 160</td></tr>
<tr><td>categoryFontSize</td><td>the font size for the category text, default 12,</td></tr>
<tr><td>barThickness</td><td>the thickness for the bar, default 14</td></tr>
<tr><td>speed</td><td>the elapsed time, in ms, for the animation of the bar, default 500</td></tr>
</table>
<h3>Columns</h3>
<pre>
<code>
maxColumnWidth : 60,
columnPadding : 15,
groupColumnPadding : 50,
categoryFontSize : 12,
</code>
</pre>
<table>
<tr><td>maxColumnWidth</td><td>the max width for the columns (to keep the proportions), default 60</td></tr>
<tr><td>columnPadding</td><td>space between each column, default 15</td></tr>
<tr><td>groupColumnPadding</td><td>space between each group of columns, default 50</td></tr>
</table>
<h3>Donut and Sunburst</h3>
<pre>
<code>
donutRation : 0.3,
maxDonutFont: 50,
</code>
</pre>
<table>
<tr><td>donutWidth</td><td>the ration between the width of the donut and the diameter, default 0.3. In the case of sunburst, it resulting ring width is divided by the number of rings</td></tr>
<tr><td>maxDonutFont</td><td>the max font size for the labels display in side the dunut, default 50</td></tr>
</table>
<h3>Lines</h3>
<pre>
<code>
minDataInterval : 25,
'line-width' : 2,
elapsedTime : 2000,
categoryFontSize : 12,
</code>
</pre>
<table>
<tr><td>minDataInterval</td><td>minimum space between each record (or point), default 25</td></tr>
<tr><td>'line-width'</td><td>the thickness for the lines, default 2</td></tr>
<tr><td>elapsedTime</td><td>the elapsed time (in ms) for the line animation, default 2000</td></tr>
</table>
<h3>Bubbles</h3>
<pre>
<code>
bubbleStyle : {fill:'#bddaf5', stroke:'#7aaadc'}
</code>
</pre>
<table>
<tr><td>bubbleStyle</td><td>style applied to the bubbles, default {fill:'#bddaf5', stroke:'#7aaadc'}</td></tr>
</table>
<p>
<b>Note: </b>Colors can be set as gradient: '90-#ccc-#a1a1a1:100-90'
</p>
</div>
</div>
<script type="text/javascript">
"use strict";
//*
var objDataB={
canvasID : 'canvas1',
chartType:'bars',
gridSettings:{
popUpA:{sfill:'#bebebe', sjustifyContent:'center'},
},
title:{text:'Test Bars', align:'left'},
subTitle:{text:'Test Bars', align:'left'},
axisTitles : {yTitle:'Waste Types', xTitle: 'Tonnes', color:'#a1a1a1'},
keys : {position:'right', align:'left', font:{}},
labels: ['17.01.07 - Aggregates','17.01.07 - Hardcore/Concrete a a a a a a a a a a a a a a a a a a a a a a a a a a a b b b b b b b b b b b b b b b b b b b b b b b c','17.01.03 - Ceramics','17.09.04 - Ceiling Tiles','17.05.04 a b c d e f g h y j u i k - Soil','20.01.01 - Cardboard','20.01.01 - Paper','17.02.03 - Soft Plastic','17.02.03 - Hard Plastic','17.02.02 - Plate Glass','17.02.02 - Glass Bottles','17.02.01 - Timber','17.02.01 - MDF','17.02.01 - Ply & Chipboard','17.04.07 - Metal','17.08.02 - Plasterboard','17.06.04 - Insulation Materials','20.01.11 - Fabrics','20.03.01 - Canteen Waste','20.02.01 - Vegetation'],
dataSet : [
{
name: 'Recycled',
data: [6181.9700,2636.9860,34.1180,53.2350,45.1500,287.9192,83.4599,224.0508,194.6011,94.3620,14.8800,1515.4128,87.1713,197.7480,580.6430,416.7000,77.7955,5.2900,92.0340,30.8220],
color:'#67af45'
},
{
name: 'Recovered',
color:'#188ee2',
data: [20.0000,0.0000,0.0000,0.5500,0.0000,0.0000,0.0000,6.8882,0.0000,0.2200,0.0000,68.1912,1.4000,20.1720,0.0000,0.0000,8.4795,0.3900,9.1100,0.0000]
},
{
name: 'Landfill',
color:'#F7464A',
data: [20.0000,0.0000,0.0000,0.0000,0.0000,0.0148,0.0031,0.0140,0.0009,0.1260,0.0000,-0.0000,0.0017,-0.0000,0.0000,0.0000,0.0000,-0.0000,0.0000,0.0000]
}
],
popUpBox:{font:{"font-weight":500}},
};
chartLoader('Bars', objDataB);
//var bars=new Bars(objDataB);
/**/
</script>
<script type="text/javascript">
//*
var objDataBubbles={
canvasID : 'canvas2',
chartType:'bubbles',
gridSettings:{
bubbleStyle : {fill : '#98cc7f', stroke:'#61a441'},
},
title:{text:'Test Bubbles', align:'left'},
subTitle:{text:'Test Bubbles', align:'left'},
axisTitles : {xTitle:'Removed Waste (t)', yTitle: 'Cost (£)'},
keys : {position:'top', align:'left'},
dataNames : ['Removed Waste (t): ', 'Cost: £', 'Num of Sites: '],
dataSet : [
{ data : [0.97, 2090, 2], name: 'Derbyshire County Council'},
{ data : [5085.568, 151022.4, 8], name: 'Bedfordshire Council'},
{ data : [2.5, 660, 3], name: 'Buckinghamshire Council'},
{ data : [137.22, 2940, 2], name: 'Central Beds SoR Contract'},
{ data : [5622.973, 90978.93, 5], name: 'Essex Council'},
{ data : [62.12, 15032.5, 1], name: 'Estate Lighting Solutions'},
{ data : [17.444, 5271, 1], name: 'Head Office'},
{ data : [1140.98, 125223.82, 3], name: 'Hertfordshire Council'},
{ data : [428.682, 42364.6, 1], name: 'Hounslow Council'},
{ data : [400.46, 39062.65, 3], name: 'Hull City Council'},
{ data : [18.7, 1596, 1], name: 'Leicestershire County Council'},
{ data : [0, 0, 1], name: 'Lincolnshire Council'},
{ data : [147.34, 4610, 4], name: 'Milton Keynes'},
{ data : [3865.442, 103279.56, 3], name: 'Milton Keynes Contract'},
{ data : [5002.38, 97027.95, 2], name: 'Norfolk Council'},
{ data : [1035.16, 23483, 6], name: 'Wiltshire and Swindon'},
{ data : [4673.7006, 77784.59, 4], name: 'Wiltshire and Swindon 1'},
]
};
chartLoader('BubbleChart', objDataBubbles);
//var bubbles=new BubbleChart(objData2);
/**/
</script>
<script type="text/javascript">
"use strict";
//*
var objDataColumn={
canvasID : 'canvas3',
chartType:'columns',
title:{text:'Test Columns', align:'left'},
subTitle:{text:'Test Columns', align:'left'},
axisTitles : {xTitle:'Continents', yTitle: 'Tonnes'},
keys : {position:'right', align:'top'},
labels : ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
dataSet : [
{
data : [3626.8812, 43326.3103, 496.1106,8335.9516,66.4822], name: 'Recycled', color : '#67af45'
},
{
data : [7682.4436, 190.07, 1127.4844,352.3406,284.803], name: 'Recovered', color : '#188ee2'
},
{
data : [673.5668,6087.886,1229.0503,673.4203,1101.0603], name: 'Landfill', color : '#F7464A'
},
]
};
chartLoader('Columns', objDataColumn);
//new Columns(objData3);
/**/
</script>
<script type="text/javascript">
"use strict";
//*
var objDataDonutChart={
canvasID : 'canvas4',
chartType:'donut',
gridSettings:{
donutWidth:60,
orderData:false,
},
title:{text:'Test Donut', align:'left'},
subTitle:{text:'Test Donut', align:'left'},
keys : {position:'right', align:'middle'},
dataSet : [
{ data : [25.00], name: 'Recycled', color:'#67af45'},
{ data : [14.50], name: 'Recovered', color:'#188ee2'},
{ data : [60.50], name: 'Landfill', color:'#F7464A'},
]
};
chartLoader('DonutChart', objDataDonutChart);
/*
*/
</script>
<script type="text/javascript">
//*
var objDataLines={
canvasID : 'canvas5',
chartType:'lines',
title:{text:'Test Lines', align:'left'},
subTitle:{text:'Test Lines', align:'left'},
axisTitles : {xTitle:'Customers', yTitle: 'CO2 (tonnes)'},
keys : {position:'right', align:'top'},
serie : ['a', 'b', 'c', 'd', 'e'],
dataSet : [
{
data : [3626.8812, 43326.3103, 496.1106,8335.9516,66.4822], name: 'Recycled', color : '#67af45'
},
{
data : [7682.4436, 190.07, 1127.4844,352.3406,284.803], name: 'Recovered', color : '#188ee2'
},
{
data : [673.5668,6087.886,1229.0503,673.4203,1101.0603], name: 'Landfill', color : '#F7464A'
},
]
};
setTimeout(function(){
chartLoader('Lines', objDataLines);
}, 300);
/**/
</script>
<script>
//
var objDataSunBurst={
canvasID : 'canvas6',
chartType:'sunburst',
gridSettings:{
donutWidth:60,
orderData:false,
},
title:{text:'Test Sunburst', align:'left'},
subTitle:{text:'Test Sunburst', align:'left'},
keys : {position:'right', align:'middle'},
dataSet : [
{ data : [20.50, [8.40, 5.60, 6.50]], name: ['Derbyshire County Council', ['Metal', 'Glass', 'Cardboard']], color:'#67af45'},
{ data : [45.00, [20.60, 24.40]], name: ['Bedfordshire Council', ['Wood', 'Plastic']], color:'#188ee2'},
{ data : [34.50, [15.35, 5.10, 14.05]], name: ['Derby', ['Glass', 'Paper', 'Others']], color:'#F7464A'},
]
};
setTimeout(function(){
chartLoader('SunburstChart', objDataSunBurst);
},500);
/**/
</script>
</body>
</html>