Live charts in Jupyter notebooks. https://gists.cwidanage.com/2021/03/realtime-and-live-charts-on-google.html

ipython-live-charts.py

import IPython
import numpy as np
from IPython.display import display, HTML, Javascript
import time
import random

def configure_browser_state():
  display(IPython.core.display.HTML('''
    <canvas id="myChart"></canvas>
  '''))
  display(IPython.core.display.HTML('''
        <script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
        <script>
          var ctx = document.getElementById('myChart').getContext('2d');
          var chart = new Chart(ctx, {
              // The type of chart we want to create
              type: 'line',

              // The data for our dataset
              data: {
                  labels: [0,1,2,3,4,5],
                  datasets: [{
                      label: 'Score',
                      borderColor: 'rgb(255, 99, 132)',
                      data: [0,1,2,3,4,5]
                  }]
              },

              // Configuration options go here
              options: {
                animation: {
                  duration: 0, // general animation time
                }
              }
          });

          function addData(label, value){
            chart.data.labels.push(label)
            chart.data.datasets[0].data.push(value)

            // optional windowing
            if(chart.data.labels.length > 10) {
              chart.data.labels.shift()
              chart.data.datasets[0].data.shift()
            }

            chart.update();
          }
        </script>
        '''))
configure_browser_state()

for i in range(0,1000):
  # mock data source
  x = random.randint(0,10)
  display(Javascript('addData('+str(i)+','+str(x)+')'))
  time.sleep(1.0/24)