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

Chart.defaults.global = {
    animation : false
}

var mArray = [];
var ticker = 0;

var ctx = $("#lines").get(0).getContext("2d");
var data = {
    labels : [0],
    datasets: [
        {
            label: "Z",
            data: [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
    );*/
    
    mArray.push(event.acceleration.z);
    if(mArray.length > 20) {
        mArray.unshift();
        lineChart.removeData();
    }

    var v = event.acceleration.z;
    if(v == "null") {
        v = 0;
    }
    
    lineChart.addData([event.acceleration.z], ticker++);
    
}, true);