Altair plotting realtime data Python

Question

how to plot realtime using Altair in Python? I have 1 grouped data by 'groupby' pandas. I don't know how to plot altair realtime with grouped data realtime. This is my code:

import mainData
import altair as alt
alt.renderers.enable('altair_viewer')
import time

while True:
  mainData.realTime()
  chart0 = alt.Chart(mainData.grouped.get_group(0, obj=None).reset_index()).transform_fold(mainData.grouped.get_group(0, obj=None).columns.tolist(), as_=['quote', 'price']).mark_line().encode(x='index:T', y='price:Q', color='quote:N')
  chart1 = alt.Chart(mainData.grouped.get_group(1, obj=None).reset_index()).transform_fold(mainData.grouped.get_group(1, obj=None).columns.tolist(), as_=['quote', 'price']).mark_line().encode(x='index:T', y='price:Q', color='quote:N')
  chart2 = alt.Chart(mainData.grouped.get_group(2, obj=None).reset_index()).transform_fold(mainData.grouped.get_group(2, obj=None).columns.tolist(), as_=['quote', 'price']).mark_line().encode(x='index:T', y='price:Q', color='quote:N')
  chart3 = alt.Chart(mainData.grouped.get_group(3, obj=None).reset_index()).transform_fold(mainData.grouped.get_group(3, obj=None).columns.tolist(), as_=['quote', 'price']).mark_line().encode(x='index:T', y='price:Q', color='quote:N')
  chart4 = alt.Chart(mainData.grouped.get_group(4, obj=None).reset_index()).transform_fold(mainData.grouped.get_group(4, obj=None).columns.tolist(), as_=['quote', 'price']).mark_line().encode(x='index:T', y='price:Q', color='quote:N')
  chart5 = alt.Chart(mainData.grouped.get_group(5, obj=None).reset_index()).transform_fold(mainData.grouped.get_group(5, obj=None).columns.tolist(), as_=['quote', 'price']).mark_line().encode(x='index:T', y='price:Q', color='quote:N')
  alt.vconcat(alt.hconcat(chart0, chart1, chart2), alt.hconcat(chart3, chart4, chart5)).show()
  time.sleep(0.2)

I have ploted a chart display on a webpage already, but the show() blocking my loop, so I cannot recreate grouped data in while Loop. grouped data is global variable in mainData.realtime(). How to display Altair's chart on browser without show()? Or how to use Altair in while loop to plotting chart realtime? Thank you in advance. Minimal example:

import pandas as pd
import numpy as np
import time
import altair as alt
alt.renderers.enable('altair_viewer')

while True:
   df = pd.DataFrame(np.random.randint(0,100,size=(100, 4)), columns=list('ABCD'))
   chart0 = alt.Chart(df.reset_index()).transform_fold(df.columns.tolist(), as_=['quote', 'price']).mark_line().encode(x='index:T', y='price:Q', color='quote:N')
   chart0.show()
   print("1")
   time.sleep(0.5)

Answer 1

I have already my answer, Altair using with Streamlit for plotting chart real-time. Thank you buddies:D. I following this article: https://towardsdatascience.com/how-to-run-animations-in-altair-and-streamlit-2a0624789ad .

This is my code:

import pandas as pd
import numpy as np
import time
import altair as alt
import streamlit as st

df = pd.DataFrame(np.random.randint(0,100,size=(100, 4)), columns=list('ABCD'))
def draw(df):
  chart = alt.Chart(df.reset_index()).transform_fold(df.columns.tolist(), as_=['quote', 'price']).mark_line().encode(x='index:T', y='price:Q')
  return chart

draw(df)
realTimeChart = st.altair_chart(chart)

while True:
  df = pd.DataFrame(np.random.randint(0,100,size=(100, 4)), columns=list('ABCD'))
  draw(df)
  realTimeChart = realTimeChart.altair_chart(chart)
  time.sleep(0.2)