Is there any way to make my dashboard refresh every X second?

Question

Currently I'm using panel and hvplot to make a dashboard in my raspberry pi. I want to make my dashboard refresh regularly.

I'll put my code here

import pandas as pd
import numpy as np
import panel as pn
import hvplot.pandas
import mysql.connector as connection
import datetime as dt

# DATABSE VARIABLE
DBHOST = "10.13.2.157"    #The Host use "localhost" or the database IP
DBUSER = "VAIO"  #The user
DBPASS = "svf14" #The user password
DBDATA = "exampledb"  #The database to insert
DBTABL = "Test2"  #The table to insert

# Read data
try:
    mydb = connection.connect(host=DBHOST, user=DBUSER, password=DBPASS, database=DBDATA, use_pure=True)
    query = "Select * from " + DBTABL + ";"
    dataFrame = pd.read_sql(query, mydb)
    mydb.close()
except Exception as e:
    mydb.close()
    print(str(e))


# Take DeviceID from database column
DEVICELIST = list(dataFrame['DeviceID'].unique())
# TAKE MONTH FROM Date COLUMN
dataFramewMonth = dataFrame.assign(month=dataFrame['Date'].dt.month).reset_index()
# Make the dataframe interactive
interDataFrame = dataFramewMonth.interactive()

## Widgets

# Slider to see which month to inspect - shared with every graph
monthSlider = pn.widgets.IntSlider(name='Month slider', start=1, end=12, step=1, value=1)

# Button to pick which data to show for top graph
topYAxisData = pn.widgets.RadioButtonGroup(
    name='data select', 
    options=['Temperature', 'Pressure'],
    button_type='primary'
)

# Selector to pick which device data to show for top graph
topDeviceSelector = pn.widgets.Select(name='Top Device selector', options=DEVICELIST, width = 150)

# Data pipeline for plotting the top graph
topDataPipeline = (
    interDataFrame[(interDataFrame.month <= monthSlider) & (interDataFrame.DeviceID == topDeviceSelector)]
    .reset_index()
    .reset_index(drop = True)
    )

topDataPlot = topDataPipeline.hvplot(x='Date', y=topYAxisData, line_width=2, title='Sensor Data', width = 1200, height = 380)

# Device selector for bottom one
botDeviceSelector1 = pn.widgets.Select(name='Device selector 1', options=DEVICELIST)
botDeviceSelector2 = pn.widgets.Select(name='Device selector 2', options=DEVICELIST)
botDeviceSelector3 = pn.widgets.Select(name='Device selector 3', options=DEVICELIST)

# Button to pick which data to show for bottom one
botYAxisData1 = pn.widgets.RadioButtonGroup(
    name='bot data select1', 
    options=['Temperature', 'Pressure'],
    button_type='primary'
)
botYAxisData2 = pn.widgets.RadioButtonGroup(
    name='bot data select2', 
    options=['Temperature', 'Pressure'],
    button_type='primary'
)
botYAxisData3 = pn.widgets.RadioButtonGroup(
    name='bot data select3', 
    options=['Temperature', 'Pressure'],
    button_type='primary'
)

# Data pipeline for plotting
botDataPipeline1 = (
    interDataFrame[(interDataFrame.month <= monthSlider) & (interDataFrame.DeviceID == botDeviceSelector1)]
    .reset_index()
    .reset_index(drop = True)
    )
botDataPipeline2 = (
    interDataFrame[(interDataFrame.month <= monthSlider) & (interDataFrame.DeviceID == botDeviceSelector2)]
    .reset_index()
    .reset_index(drop = True)
    )
botDataPipeline3 = (
    interDataFrame[(interDataFrame.month <= monthSlider) & (interDataFrame.DeviceID == botDeviceSelector3)]
    .reset_index()
    .reset_index(drop = True)
    )

# Plotting for bot graph
botDataPlot1 = botDataPipeline1.hvplot(x='Date', y=botYAxisData1, line_width=2, title='Sensor Data 1')
botDataPlot2 = botDataPipeline2.hvplot(x='Date', y=botYAxisData2, line_width=2, title='Sensor Data 2')
botDataPlot3 = botDataPipeline3.hvplot(x='Date', y=botYAxisData3, line_width=2, title='Sensor Data 3')

## End Widgets
sizing_mode='stretch_width'

# Template
template = pn.template.FastListTemplate(
    title='Temperature / Pressure Data',
    sidebar=[pn.pane.Markdown("# What should I write here??"),
             pn.pane.Markdown("### What should I write here?? AGAIN"),
             pn.pane.PNG("Temperature.png", sizing_mode='scale_both'),
             pn.pane.Markdown('Month Selector'),
             monthSlider],
    main=[pn.Row(pn.Column(topYAxisData, topDataPlot.panel(), margin=(0,25)), 
                 pn.Column(topDeviceSelector)),
          pn.Row(pn.Column(botYAxisData1, botDataPlot1.panel(), margin=(0,25)),
                 pn.Column(botYAxisData2, botDataPlot2.panel(), margin=(0,25)),
                 pn.Column(botYAxisData3, botDataPlot3.panel(), margin=(0,25)),
                 pn.Column(pn.Row(botDeviceSelector1), pn.Row(botDeviceSelector2), pn.Row(botDeviceSelector3)))],
    accent_base_color="#84A9FF",
    header_background="#84A9FF"
)

pn.serve(template, port=8080, show=False)

#template.show()
#template.servable()

is there any way to make it possible? I'm new to this so if there's other library that's better than this you may inform me.

What I tried is add_periodic_callback it does nothing, tried to refresh the browser but still no update

Is there any way to make my dashboard refresh every X second?

0 Answers0