Added Chart.js example (example5)
This commit is contained in:
dosse91
parent
cf24c81f3e
commit
eb349648bd
2 changed files with 266 additions and 0 deletions
250
example5.html
Normal file
250
example5.html
Normal file
|
|
@ -0,0 +1,250 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<title>Speedtest</title>
|
||||||
|
<style type="text/css">
|
||||||
|
html,body{
|
||||||
|
margin:0;
|
||||||
|
padding:0;
|
||||||
|
border:none;
|
||||||
|
text-align:center;
|
||||||
|
}
|
||||||
|
#startBtn{
|
||||||
|
display:inline-block;
|
||||||
|
border:0.15em solid #000000;
|
||||||
|
padding:0.3em 0.5em;
|
||||||
|
margin:0.6em;
|
||||||
|
color:#000000;
|
||||||
|
text-decoration:none;
|
||||||
|
}
|
||||||
|
#ip{
|
||||||
|
margin:0.8em 0;
|
||||||
|
font-size:1.2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chart1Area, #chart2Area{
|
||||||
|
width:100%;
|
||||||
|
max-width:30em;
|
||||||
|
height:10em;
|
||||||
|
display:block;
|
||||||
|
margin:0 auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="example5_data/Chart.bundle.min.js"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var w=null;
|
||||||
|
function runTest(){
|
||||||
|
var chart1ctx=document.getElementById("chart1Area").getContext('2d'),
|
||||||
|
chart2ctx=document.getElementById("chart2Area").getContext('2d');
|
||||||
|
var dlDataset={
|
||||||
|
label: "Download",
|
||||||
|
fill: false,
|
||||||
|
lineTension: 0.1,
|
||||||
|
backgroundColor: "rgba(75,192,192,0.4)",
|
||||||
|
borderColor: "rgba(75,192,192,1)",
|
||||||
|
borderCapStyle: 'butt',
|
||||||
|
borderDash: [],
|
||||||
|
borderDashOffset: 0.0,
|
||||||
|
borderJoinStyle: 'miter',
|
||||||
|
pointBorderColor: "rgba(75,192,192,1)",
|
||||||
|
pointBackgroundColor: "#fff",
|
||||||
|
pointBorderWidth: 1,
|
||||||
|
pointHoverRadius: 5,
|
||||||
|
pointHoverBackgroundColor: "rgba(75,192,192,1)",
|
||||||
|
pointHoverBorderColor: "rgba(220,220,220,1)",
|
||||||
|
pointHoverBorderWidth: 2,
|
||||||
|
pointRadius: 1,
|
||||||
|
pointHitRadius: 10,
|
||||||
|
data: [0],
|
||||||
|
spanGaps: false,
|
||||||
|
},
|
||||||
|
ulDataset={
|
||||||
|
label: "Upload",
|
||||||
|
fill: false,
|
||||||
|
lineTension: 0.1,
|
||||||
|
backgroundColor: "rgba(192,192,75,0.4)",
|
||||||
|
borderColor: "rgba(192,192,75,1)",
|
||||||
|
borderCapStyle: 'butt',
|
||||||
|
borderDash: [],
|
||||||
|
borderDashOffset: 0.0,
|
||||||
|
borderJoinStyle: 'miter',
|
||||||
|
pointBorderColor: "rgba(192,192,75,1)",
|
||||||
|
pointBackgroundColor: "#fff",
|
||||||
|
pointBorderWidth: 1,
|
||||||
|
pointHoverRadius: 5,
|
||||||
|
pointHoverBackgroundColor: "rgba(192,192,75,1)",
|
||||||
|
pointHoverBorderColor: "rgba(220,220,220,1)",
|
||||||
|
pointHoverBorderWidth: 2,
|
||||||
|
pointRadius: 1,
|
||||||
|
pointHitRadius: 10,
|
||||||
|
data: [0],
|
||||||
|
spanGaps: false,
|
||||||
|
},
|
||||||
|
pingDataset={
|
||||||
|
label: "Ping",
|
||||||
|
fill: false,
|
||||||
|
lineTension: 0.1,
|
||||||
|
backgroundColor: "rgba(75,220,75,0.4)",
|
||||||
|
borderColor: "rgba(75,220,75,1)",
|
||||||
|
borderCapStyle: 'butt',
|
||||||
|
borderDash: [],
|
||||||
|
borderDashOffset: 0.0,
|
||||||
|
borderJoinStyle: 'miter',
|
||||||
|
pointBorderColor: "rgba(75,220,75,1)",
|
||||||
|
pointBackgroundColor: "#fff",
|
||||||
|
pointBorderWidth: 1,
|
||||||
|
pointHoverRadius: 5,
|
||||||
|
pointHoverBackgroundColor: "rgba(75,220,75,1)",
|
||||||
|
pointHoverBorderColor: "rgba(220,220,220,1)",
|
||||||
|
pointHoverBorderWidth: 2,
|
||||||
|
pointRadius: 1,
|
||||||
|
pointHitRadius: 10,
|
||||||
|
data: [],
|
||||||
|
spanGaps: false,
|
||||||
|
},
|
||||||
|
jitterDataset={
|
||||||
|
label: "Jitter",
|
||||||
|
fill: false,
|
||||||
|
lineTension: 0.1,
|
||||||
|
backgroundColor: "rgba(220,75,75,0.4)",
|
||||||
|
borderColor: "rgba(220,75,75,1)",
|
||||||
|
borderCapStyle: 'butt',
|
||||||
|
borderDash: [],
|
||||||
|
borderDashOffset: 0.0,
|
||||||
|
borderJoinStyle: 'miter',
|
||||||
|
pointBorderColor: "rgba(220,75,75,1)",
|
||||||
|
pointBackgroundColor: "#fff",
|
||||||
|
pointBorderWidth: 1,
|
||||||
|
pointHoverRadius: 5,
|
||||||
|
pointHoverBackgroundColor: "rgba(220,75,75,1)",
|
||||||
|
pointHoverBorderColor: "rgba(220,220,220,1)",
|
||||||
|
pointHoverBorderWidth: 2,
|
||||||
|
pointRadius: 1,
|
||||||
|
pointHitRadius: 10,
|
||||||
|
data: [],
|
||||||
|
spanGaps: false,
|
||||||
|
}
|
||||||
|
;
|
||||||
|
var chart1Options={
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
datasets: [dlDataset,ulDataset]
|
||||||
|
},
|
||||||
|
options:{
|
||||||
|
responsive: true,
|
||||||
|
legend: {
|
||||||
|
position: 'bottom',
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
display: true,
|
||||||
|
scaleLabel: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
ticks:{
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
display: true,
|
||||||
|
scaleLabel: "Speed",
|
||||||
|
ticks:{
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chart2Options={
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
datasets: [pingDataset,jitterDataset]
|
||||||
|
},
|
||||||
|
options:{
|
||||||
|
responsive: true,
|
||||||
|
legend: {
|
||||||
|
position: 'bottom',
|
||||||
|
},
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
display: true,
|
||||||
|
scaleLabel: {
|
||||||
|
display: false,
|
||||||
|
},
|
||||||
|
ticks:{
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
yAxes: [{
|
||||||
|
display: true,
|
||||||
|
scaleLabel: "Latency",
|
||||||
|
ticks:{
|
||||||
|
beginAtZero: true
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var chart1 = new Chart(chart1ctx, chart1Options),
|
||||||
|
chart2 = new Chart(chart2ctx, chart2Options);
|
||||||
|
|
||||||
|
document.getElementById("startBtn").style.display="none";
|
||||||
|
document.getElementById("testArea").style.display="";
|
||||||
|
document.getElementById("abortBtn").style.display="";
|
||||||
|
w=new Worker("speedtest_worker.min.js");
|
||||||
|
var interval=setInterval(function(){w.postMessage("status");}.bind(this),100);
|
||||||
|
w.onmessage=function(event){
|
||||||
|
var data=event.data.split(";");
|
||||||
|
var status=Number(data[0]);
|
||||||
|
if(status>=4){
|
||||||
|
clearInterval(interval);
|
||||||
|
document.getElementById("abortBtn").style.display="none";
|
||||||
|
document.getElementById("startBtn").style.display="";
|
||||||
|
w=null;
|
||||||
|
}
|
||||||
|
if(status==5){
|
||||||
|
document.getElementById("testArea").style.display="none";
|
||||||
|
}
|
||||||
|
if(status==1&&Number(data[1])>0){
|
||||||
|
chart1.data.datasets[0].data.push(Number(data[1]));
|
||||||
|
chart1.data.labels[chart1.data.datasets[0].data.length-1]="";
|
||||||
|
chart1.update();
|
||||||
|
}
|
||||||
|
if(status==3&&Number(data[2])>0){
|
||||||
|
chart1.data.datasets[1].data.push(Number(data[2]));
|
||||||
|
chart1.data.labels[chart1.data.datasets[1].data.length-1]="";
|
||||||
|
chart1.update();
|
||||||
|
}
|
||||||
|
if(status==2&&Number(data[3])>0){
|
||||||
|
chart2.data.datasets[0].data.push(Number(data[3]));
|
||||||
|
chart2.data.datasets[1].data.push(Number(data[5]));
|
||||||
|
chart2.data.labels[chart2.data.datasets[0].data.length-1]="";
|
||||||
|
chart2.data.labels[chart2.data.datasets[1].data.length-1]="";
|
||||||
|
chart2.update();
|
||||||
|
}
|
||||||
|
ip.innerHTML=data[4];
|
||||||
|
}.bind(this);
|
||||||
|
w.postMessage("start");
|
||||||
|
}
|
||||||
|
function abortTest(){
|
||||||
|
if(w)w.postMessage("abort");
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1>Speedtest</h1>
|
||||||
|
<div id="testArea" style="display:none">
|
||||||
|
<div id="ip">Please wait...</div>
|
||||||
|
<h2>Speed</h2>
|
||||||
|
<canvas id="chart1Area"></canvas>
|
||||||
|
<h2>Latency</h2>
|
||||||
|
<canvas id="chart2Area"></canvas>
|
||||||
|
<br/>
|
||||||
|
<a href="javascript:abortTest()" id="abortBtn">Abort</a>
|
||||||
|
</div>
|
||||||
|
<a href="javascript:runTest()" id="startBtn">Run speedtest</a>
|
||||||
|
<br/><br/>
|
||||||
|
Charts by <a href="http://www.chartjs.org/">Chart.js</a>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
16
example5_data/Chart.bundle.min.js
vendored
Normal file
16
example5_data/Chart.bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue