<div class=“optical-trap-wrapper”>
<div class="optical-trap" id="optical-trap"></div> <p>Temperature</p> <div class="slide-wrapper"> <input type="range" min="1" max="10" step=".1" value="9" class="slider" id="zigma" name="zigma"> </div> <p>Trap Strength</p> <div class="slide-wrapper"> <input type="range" min="0.01" max="1" step=".01" value="0.1" class="slider" id="kappa" name="kappa"> </div>
</div>
<script src=“cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js”>> <script src=“www.chartjs.org/samples/latest/utils.js”>>
<div class=“chart-wrapper”>
<canvas id="canvas"></canvas>
</div>
<script> var h = 0.3 * window.innerHeight; var xAxis = new Array(100); for ( var i = 0 ; i < 100 ; i++ ) {
xAxis[i]=i;
}
var config = {
type: 'line', data: { labels: xAxis, datasets: [{ label: 'My First dataset', backgroundColor: window.chartColors.red, borderColor: window.chartColors.red, data: ax, fill: false, }] }, options: { legend: { display: false }, responsive: true, title: { display: false, text: 'Colloid Position in the horizontal direction' }, events: ['click'], tooltips: { mode: 'index', intersect: false, }, hover: { mode: 'none', intersect: false }, scales: { xAxes: [{ ticks: { display: false, stepSize: 10, }, display: true, scaleLabel: { display: true, labelString: 'Time' } }], yAxes: [{ ticks: { min: 0, max: h, maxTicksLimit: 5, display: false, }, display: true, scaleLabel: { display: true, labelString: 'Colloid Position' } }] } }
};
function drawOpticalTrapData() {
var ctx = document.getElementById('canvas').getContext('2d'); window.myLine = new Chart(ctx, config);
};
</script>