CanvasJS

<body>


    <div id="chartContainer" style="height: 300px; width: 100%;">
    </div>
</body>

<style>
    .log {
        display: none;
        height: 50px;
        width: 50px;
        background-color: red;
        margin-left: auto;
        margin-bottom: 10px;
        margin-right: auto;
    }
</style>

<script>
    var log = document.getElementById('log')

    var myo = Myo.create(0);

    var chart;
    window.onload = function() {
        chart = new CanvasJS.Chart("chartContainer", {
            zoomEnabled: true,
            title: {
                text: "Myo"
            },
            animationEnabled: true,
            axisX: {
                labelAngle: 30
            },

            axisY: {
                includeZero: false
            },

            data: data // random generator below

        });

        chart.render();

    }

    var data = [];
    var dataSeries = {
        type: "line"
    };
    var dataPoints = [];

    myo.on('connected', function() {
        myo.streamEMG(true);
    })
    myo.on('emg', function(data) {

        var arrayLength = data.length;
        for (var i = 0; i < arrayLength; i++) {
            console.log(data[i]);
            dataPoints.push({
                x: data[i],
                y: i
            });
            dataSeries.dataPoints = dataPoints;
            data.push(dataSeries);
            chart.render();
        }

    }

    })

    myo.on('arm_unsynced', function() {
        myo.streamEMG(false);

    })

    myo.on('disconnected', function() {
        myo.streamEMG(false);
    })
</script>