Streaming chart using websockets

<!DOCTYPE html>
<html>
    <head>
        <title>WebSocket demo</title>
    </head>
    <body>
        <div style="width: 600px; height: 800px;"><canvas id="myChart"></canvas></div>

        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
        <script src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.6.1/chartjs-plugin-streaming.min.js"></script>

        <script>
         var data = 0;

         // Data
         var ws = new WebSocket("ws://127.0.0.1:5678/");
         ws.onmessage = function (event) {
             data = event.data;
         };

         // Chart
         var ctx = document.getElementById('myChart').getContext('2d');
         var chart = new Chart(ctx, {
             type: 'line',
             data: { datasets: [{ data: [], label: 'Data', borderColor: 'rgb(54, 162, 235)', backgroundColor: 'rgba(54, 162, 235, 0.5)' }] },
             options: {
                 scales: {
                     xAxes: [{ type: 'realtime' }],
                     yAxes: [{ ticks: { min: -1, max: 1, stepSize: 0.1 } }],
                 },
                 plugins: {
                     streaming: {
                         onRefresh: function(chart) {
                             chart.data.datasets.forEach(function(dataset) {
                                 dataset.data.push({ x: Date.now(), y: data });
                             });
                         },
                         delay: 1000,
                         duration: 1000*60,
                     }
                 }
             }
         });
        </script>
    </body>
</html>

#!/usr/bin/env python

import asyncio
import datetime
import random
import websockets

async def data(websocket, path):
    while True:
        data = random.uniform(-1.0, 1.0)
        await websocket.send(str(data))
        await asyncio.sleep(1)

start_server = websockets.serve(data, '127.0.0.1', 5678)

asyncio.get_event_loop().run_until_complete(start_server)
asyncio.get_event_loop().run_forever()

dtoma/streaming-charts.md