JSFiddle - React, Tailwind, and code Playground

by cvalleskey

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.js"></script>
<canvas id="lines" width="400" height="200"></canvas>
<textarea id="output" cols="40" rows="8"></textarea>

JavaScript

var mArray = [];
var ticker = 10;

var ctx = $("#lines").get(0).getContext("2d");
var data = {
    labels : [0,1,2,3,4,5,6,7,8,9],
    datasets: [
        {
            label: "Z",
            data: [0,0,0,0,0,0,0,0,0,0]
        }
    ]
}
var lineChart = new Chart(ctx).Line(data);

window.addEventListener("devicemotion", function(event) {
    /*$('#output').text(
        'Acc: ' + JSON.stringify(event.acceleration) + '\n' + 
        'Rotation: ' + JSON.stringify(event.rotationRate) + '\n' + 
        'Interval: ' + event.interval
    );*/
    
    lineChart.addData([event.acceleration.z], ticker++);
    lineChart.removeData();
    
}, true);