​

var myChart;

const data = {

  labels: [],

  datasets: [

    {

      label: "Acc X",

      backgroundColor: "rgb(255, 96, 64)",

      borderColor: "rgb(255, 96, 64)",

      pointRadius: 1.0,

      data: [],

    },

    {

      label: "Acc Y",

      backgroundColor: "rgb(69,230, 230)",

      borderColor: "rgb(69,230,230)",

       pointRadius: 1.0,

      data: [],

    },

    {

      label: "Acc Z",

      backgroundColor: "rgb(28,28,28)",

      borderColor: "rgb(28,28,28)",

       pointRadius: 1.0,

      data: [],

    },

  ],

};

​

const config = {

  type: "line",

  data: data,

  options: {

    animation: false,

    scales: {

      y: {

        // min: -2,

        // max: 2,

      },

    },

  },

};

​

var acc_count = 0;

​

function setup() {

  myChart = new Chart(document.getElementById("myChart"), config);

​

  // ORPHE CORE Init

  ble.setup();

  ble.gotAcc = function (_acc) {

    while (myChart.data.labels.length > 100) {

      myChart.data.labels.shift();

    }

    myChart.data.labels.push(acc_count);

​

    while (myChart.data.datasets[0].data.length > 100) {

      myChart.data.datasets[0].data.shift();

      myChart.data.datasets[1].data.shift();

      myChart.data.datasets[2].data.shift();

    }

    myChart.data.datasets[0].data.push(_acc.x);

    myChart.data.datasets[1].data.push(_acc.y);

    myChart.data.datasets[2].data.push(_acc.z);

​

    myChart.update();

    acc_count++;

  };

  createCanvas(100, 100);

}

​

function draw() {

  background(200);

}

​