2015-09-15 01:46:28 +02:00
|
|
|
<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<title>Scatter Chart</title>
|
|
|
|
|
<script src="../Chart.js"></script>
|
|
|
|
|
<script src="../node_modules/jquery/dist/jquery.min.js"></script>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div style="width:50%">
|
|
|
|
|
<div>
|
2015-09-21 01:25:17 +02:00
|
|
|
<canvas id="canvas" height="450" width="600" style="border: 1px solid red;"></canvas>
|
2015-09-15 01:46:28 +02:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script>
|
|
|
|
|
var randomScalingFactor = function() {
|
|
|
|
|
return Math.round(Math.random() * 10.0) * Math.pow(10, Math.ceil(Math.random() * 5));
|
|
|
|
|
};
|
|
|
|
|
var randomColor = function(opacity) {
|
|
|
|
|
return 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + (opacity || '.3') + ')';
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
var scatterChartData = {
|
|
|
|
|
datasets: [{
|
|
|
|
|
label: "V(node2)",
|
|
|
|
|
data: [{
|
|
|
|
|
x: 1,
|
|
|
|
|
y: -1.711e-2,
|
|
|
|
|
}, {
|
|
|
|
|
x: 1.26,
|
|
|
|
|
y: -2.708e-2,
|
|
|
|
|
}, {
|
|
|
|
|
x: 1.58,
|
|
|
|
|
y: -4.285e-2,
|
|
|
|
|
}, {
|
|
|
|
|
x: 2.0,
|
|
|
|
|
y: -6.772e-2,
|
|
|
|
|
}, {
|
|
|
|
|
x: 2.51,
|
|
|
|
|
y: -1.068e-1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 3.16,
|
|
|
|
|
y: -1.681e-1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 3.98,
|
|
|
|
|
y: -2.635e-1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 5.01,
|
|
|
|
|
y: -4.106e-1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 6.31,
|
|
|
|
|
y: -6.339e-1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 7.94,
|
|
|
|
|
y: -9.659e-1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 10.00,
|
|
|
|
|
y: -1.445,
|
|
|
|
|
}, {
|
|
|
|
|
x: 12.6,
|
|
|
|
|
y: -2.110,
|
|
|
|
|
}, {
|
|
|
|
|
x: 15.8,
|
|
|
|
|
y: -2.992,
|
|
|
|
|
}, {
|
|
|
|
|
x: 20.0,
|
|
|
|
|
y: -4.102,
|
|
|
|
|
}, {
|
|
|
|
|
x: 25.1,
|
|
|
|
|
y: -5.429,
|
|
|
|
|
}, {
|
|
|
|
|
x: 31.6,
|
|
|
|
|
y: -6.944,
|
|
|
|
|
}, {
|
|
|
|
|
x: 39.8,
|
|
|
|
|
y: -8.607,
|
|
|
|
|
}, {
|
|
|
|
|
x: 50.1,
|
|
|
|
|
y: -1.038e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 63.1,
|
|
|
|
|
y: -1.223e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 79.4,
|
|
|
|
|
y: -1.413e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 100.00,
|
|
|
|
|
y: -1.607e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 126,
|
|
|
|
|
y: -1.803e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 158,
|
|
|
|
|
y: -2e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 200,
|
|
|
|
|
y: -2.199e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 251,
|
|
|
|
|
y: -2.398e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 316,
|
|
|
|
|
y: -2.597e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 398,
|
|
|
|
|
y: -2.797e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 501,
|
|
|
|
|
y: -2.996e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 631,
|
|
|
|
|
y: -3.196e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 794,
|
|
|
|
|
y: -3.396e1,
|
|
|
|
|
}, {
|
|
|
|
|
x: 1000,
|
|
|
|
|
y: -3.596e1,
|
|
|
|
|
},]
|
|
|
|
|
}]
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
$.each(scatterChartData.datasets, function(i, dataset) {
|
|
|
|
|
dataset.borderColor = randomColor(0.4);
|
|
|
|
|
dataset.backgroundColor = randomColor(0.1);
|
|
|
|
|
dataset.pointBorderColor = randomColor(0.7);
|
|
|
|
|
dataset.pointBackgroundColor = randomColor(0.5);
|
|
|
|
|
dataset.pointBorderWidth = 1;
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
window.onload = function() {
|
|
|
|
|
var ctx = document.getElementById("canvas").getContext("2d");
|
|
|
|
|
window.myScatter = Chart.Scatter(ctx, {
|
|
|
|
|
data: scatterChartData,
|
|
|
|
|
options: {
|
|
|
|
|
scales: {
|
|
|
|
|
xAxes: [{
|
|
|
|
|
type: 'logarithmic',
|
|
|
|
|
position: 'bottom',
|
2015-09-26 22:50:59 +02:00
|
|
|
ticks: {
|
2015-09-15 01:46:28 +02:00
|
|
|
userCallback: function(tick) {
|
2015-09-15 02:32:23 +02:00
|
|
|
var remain = tick / (Math.pow(10, Math.floor(Chart.helpers.log10(tick))));
|
|
|
|
|
if (remain === 1 || remain === 2 || remain === 5) {
|
|
|
|
|
return tick.toString() + "Hz";
|
|
|
|
|
}
|
|
|
|
|
return '';
|
2015-09-21 01:25:17 +02:00
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
scaleLabel: {
|
|
|
|
|
labelString: 'Frequency',
|
2015-11-29 19:33:24 +01:00
|
|
|
display: true,
|
2015-09-15 01:46:28 +02:00
|
|
|
}
|
|
|
|
|
}],
|
|
|
|
|
yAxes: [{
|
|
|
|
|
type: 'linear',
|
2015-09-26 22:50:59 +02:00
|
|
|
ticks: {
|
2015-09-15 01:46:28 +02:00
|
|
|
userCallback: function(tick) {
|
|
|
|
|
return tick.toString() + "dB";
|
|
|
|
|
}
|
2015-09-21 01:25:17 +02:00
|
|
|
},
|
|
|
|
|
scaleLabel: {
|
|
|
|
|
labelString: 'Voltage',
|
2015-11-29 19:33:24 +01:00
|
|
|
display: true
|
2015-09-15 01:46:28 +02:00
|
|
|
}
|
|
|
|
|
}]
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
