Skip to content

Commit f27709a

Browse files
etimbergetimberg
committed
Initial samples
1 parent cae2b7d commit f27709a

File tree

4 files changed

+599
-0
lines changed

4 files changed

+599
-0
lines changed

‎samples/zoom-bar.html‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Bar Chart Zoom</title>
6+
<script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
7+
<script src="../node_modules/hammerjs/hammer.min.js"></script>
8+
<script src="../Chart.Zoom.js"></script>
9+
<style>
10+
canvas {
11+
-moz-user-select: none;
12+
-webkit-user-select: none;
13+
-ms-user-select: none;
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<div id="container" style="width: 75%;">
20+
<canvas id="canvas"></canvas>
21+
</div>
22+
<script>
23+
var MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
24+
25+
var randomScalingFactor = function() {
26+
return (Math.random() > 0.5 ? 1.0 : -1.0) * Math.round(Math.random() * 100);
27+
};
28+
var randomColorFactor = function() {
29+
return Math.round(Math.random() * 255);
30+
};
31+
var randomColor = function() {
32+
return 'rgba(' + randomColorFactor() + ',' + randomColorFactor() + ',' + randomColorFactor() + ',.7)';
33+
};
34+
35+
var barChartData = {
36+
labels: ["January", "February", "March", "April", "May", "June", "July"],
37+
datasets: [{
38+
label: 'Dataset 1',
39+
backgroundColor: "rgba(220,220,220,0.5)",
40+
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
41+
}, {
42+
hidden: true,
43+
label: 'Dataset 2',
44+
backgroundColor: "rgba(151,187,205,0.5)",
45+
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
46+
}, {
47+
label: 'Dataset 3',
48+
backgroundColor: "rgba(151,187,205,0.5)",
49+
data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
50+
}]
51+
52+
};
53+
54+
window.onload = function() {
55+
var ctx = document.getElementById("canvas").getContext("2d");
56+
window.myBar = new Chart(ctx, {
57+
type: 'bar',
58+
data: barChartData,
59+
options: {
60+
// Elements options apply to all of the options unless overridden in a dataset
61+
// In this case, we are setting the border of each bar to be 2px wide and green
62+
elements: {
63+
rectangle: {
64+
borderWidth: 2,
65+
borderColor: 'rgb(0, 255, 0)',
66+
borderSkipped: 'bottom'
67+
}
68+
},
69+
responsive: true,
70+
legend: {
71+
position: 'top',
72+
},
73+
title: {
74+
display: true,
75+
text: 'Chart.js Bar Chart'
76+
},
77+
pan: {
78+
enabled: true,
79+
mode: 'y'
80+
},
81+
zoom: {
82+
enabled: true,
83+
mode: 'y',
84+
limits: {
85+
max: 10,
86+
min: 0.5
87+
}
88+
},
89+
scales: {
90+
xAxes: [{
91+
ticks: {
92+
min: 'February',
93+
max: 'June'
94+
}
95+
}]
96+
}
97+
}
98+
});
99+
100+
};
101+
</script>
102+
</body>
103+
104+
</html>

‎samples/zoom-log.html‎

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<title>Scatter Chart</title>
6+
<script src="../node_modules/chart.js/dist/Chart.bundle.js"></script>
7+
<script src="../node_modules/hammerjs/hammer.min.js"></script>
8+
<script src="../Chart.Zoom.js"></script>
9+
<style>
10+
canvas {
11+
-moz-user-select: none;
12+
-webkit-user-select: none;
13+
-ms-user-select: none;
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<div style="width:75%">
20+
<div>
21+
<canvas id="canvas"></canvas>
22+
</div>
23+
</div>
24+
<script>
25+
var randomScalingFactor = function() {
26+
return Math.round(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
27+
};
28+
var randomColor = function(opacity) {
29+
return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
30+
};
31+
32+
var scatterChartData = {
33+
datasets: [{
34+
label: "V(node2)",
35+
data: [{
36+
x: 1,
37+
y: -1.711e-2,
38+
}, {
39+
x: 1.26,
40+
y: -2.708e-2,
41+
}, {
42+
x: 1.58,
43+
y: -4.285e-2,
44+
}, {
45+
x: 2.0,
46+
y: -6.772e-2,
47+
}, {
48+
x: 2.51,
49+
y: -1.068e-1,
50+
}, {
51+
x: 3.16,
52+
y: -1.681e-1,
53+
}, {
54+
x: 3.98,
55+
y: -2.635e-1,
56+
}, {
57+
x: 5.01,
58+
y: -4.106e-1,
59+
}, {
60+
x: 6.31,
61+
y: -6.339e-1,
62+
}, {
63+
x: 7.94,
64+
y: -9.659e-1,
65+
}, {
66+
x: 10.00,
67+
y: -1.445,
68+
}, {
69+
x: 12.6,
70+
y: -2.110,
71+
}, {
72+
x: 15.8,
73+
y: -2.992,
74+
}, {
75+
x: 20.0,
76+
y: -4.102,
77+
}, {
78+
x: 25.1,
79+
y: -5.429,
80+
}, {
81+
x: 31.6,
82+
y: -6.944,
83+
}, {
84+
x: 39.8,
85+
y: -8.607,
86+
}, {
87+
x: 50.1,
88+
y: -1.038e1,
89+
}, {
90+
x: 63.1,
91+
y: -1.223e1,
92+
}, {
93+
x: 79.4,
94+
y: -1.413e1,
95+
}, {
96+
x: 100.00,
97+
y: -1.607e1,
98+
}, {
99+
x: 126,
100+
y: -1.803e1,
101+
}, {
102+
x: 158,
103+
y: -2e1,
104+
}, {
105+
x: 200,
106+
y: -2.199e1,
107+
}, {
108+
x: 251,
109+
y: -2.398e1,
110+
}, {
111+
x: 316,
112+
y: -2.597e1,
113+
}, {
114+
x: 398,
115+
y: -2.797e1,
116+
}, {
117+
x: 501,
118+
y: -2.996e1,
119+
}, {
120+
x: 631,
121+
y: -3.196e1,
122+
}, {
123+
x: 794,
124+
y: -3.396e1,
125+
}, {
126+
x: 1000,
127+
y: -3.596e1,
128+
},]
129+
}]
130+
};
131+
132+
scatterChartData.datasets.forEach(function(dataset) {
133+
dataset.borderColor = randomColor(0.4);
134+
dataset.backgroundColor = randomColor(0.1);
135+
dataset.pointBorderColor = randomColor(0.7);
136+
dataset.pointBackgroundColor = randomColor(0.5);
137+
dataset.pointBorderWidth = 1;
138+
});
139+
140+
window.onload = function() {
141+
var ctx = document.getElementById("canvas").getContext("2d");
142+
window.myScatter = Chart.Scatter(ctx, {
143+
data: scatterChartData,
144+
options: {
145+
title: {
146+
display: true,
147+
text: 'Chart.js Scatter Chart - Logarithmic X-Axis'
148+
},
149+
scales: {
150+
xAxes: [{
151+
type: 'logarithmic',
152+
position: 'bottom',
153+
ticks: {
154+
userCallback: function(tick) {
155+
var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
156+
if (remain === 1 || remain === 2 || remain === 5) {
157+
return tick.toString() + "Hz";
158+
}
159+
return '';
160+
},
161+
maxRotation: 0
162+
},
163+
scaleLabel: {
164+
labelString: 'Frequency',
165+
display: true,
166+
},
167+
}],
168+
yAxes: [{
169+
type: 'linear',
170+
ticks: {
171+
userCallback: function(tick) {
172+
return tick.toFixed(0) + "dB";
173+
}
174+
},
175+
scaleLabel: {
176+
labelString: 'Voltage',
177+
display: true
178+
}
179+
}]
180+
},
181+
pan: {
182+
enabled: true,
183+
mode: 'xy',
184+
limits: {
185+
xmin: 1e-4,
186+
ymin: -50,
187+
ymax: 10
188+
},
189+
xScale0: {
190+
max: 1e4
191+
}
192+
},
193+
zoom: {
194+
enabled: true,
195+
mode: 'xy',
196+
limits: {
197+
max: 10,
198+
min: 0.5
199+
}
200+
}
201+
}
202+
});
203+
};
204+
</script>
205+
</body>
206+
207+
</html>

0 commit comments

Comments
 (0)