-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathexample.html
134 lines (115 loc) · 3.15 KB
/
example.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
<html>
<head>
<script src="slimchart.js"></script>
<script>
//<!--
//
// For the demo... build some random data that looks decent.
//
function buildRandomChartData(count, datapoints) {
var labels = [];
var datasets = [];
var initial = datapoints / 3;
var jitter = datapoints / 5;
for (var p = 0; p < datapoints; p++) {
labels.push(p);
for (var d = 0; d < count; d++) {
if (d >= datasets.length) {
datasets.push({data: [initial]});
} else {
var last = datasets[d].data[p - 1];
var current = Math.max(0, last + (Math.random() - 0.5) * jitter);
datasets[d].data.push(current);
}
}
}
return {
labels: labels,
datasets: datasets
};
}
//
// Create the chart with custom options...
//
function draw() {
var datasets = document.getElementById('datasets').value;
var datapoints = document.getElementById('datapoints').value;
var smooth = document.getElementById('smooth').checked;
var tension = document.getElementById('tension').value;
var chart = new SlimChart({
yAxisMin: 0,
xAxisFormatter: function (val) {
if (val % Math.floor(datapoints / 10) == 0) {
return val;
} else {
return "";
}
},
smooth: smooth,
tension: tension,
canvas: document.getElementById('canvas')
});
var data = buildRandomChartData(datasets, datapoints);
var startTime = new Date().getTime();
chart.draw(data);
var endTime = new Date().getTime();
return false;
}
//-->
</script>
<style>
#canvas {
border: none;
width: 800px;
height: 400px;
background: #ffffff;
}
body {
background: #ffffff;
font-family: arial, sans-serif;
}
h1 {
text-align: center;
}
.main {
max-width: 800px;
margin: 0 auto;
}
form {
padding: 20px 50px;
}
input[type=text] {
width: 50px;
text-align: center;
}
</style>
</head>
<body onload="draw()">
<div class="main">
<h1>SlimChart Example</h1>
<p>
This example plots multiple series of random data. For fun, you can
keep refreshing this chart to see different lines. View source or
check out README.md to see how it works.
</p>
<canvas id="canvas" width="800" height="400"></canvas>
<form onsubmit="return draw()">
<p>
Generate
<input id="datasets" type="text" value="3"/>
random series of
<input id="datapoints" type="text" value="100"/>
datapoints each.
</p>
<p>
<input id="smooth" type="checkbox" checked/>
Enable smoothing with tension of
<input id="tension" type="text" value="4"/>
</p>
<p>
<input type="submit" value="Render It!"/>
</p>
</form>
</div>
</body>
</html>