This is my first question. I am making a server in django, in which I use altair to create a series of graphs and after passing them by context, display them in an html. Now I want to make my charts interactive with panel, in the HTML itself. The problem I have right now is that it shows me a small list with the “fields” to change, but when I click, it doesn’t change my graph. Same for the time bar. I leave my views.py and HTML code, waiting for answers in case I have to add some more documentation. Thank you very much in advance
def panel(request):
spamreader500_co2 = models.EM500_CO2.objects.filter(user=request.user)
if(spamreader500_co2.count()==0):
graficos=False
time500_co2=[]
temperature500_co2=[]
humidity500_co2=[]
co2500_co2=[]
barometric_pressure500_co2=[]
n500_co2=0
for s in spamreader500_co2:
time500_co2.append(s.time)
temperature500_co2.append(s.temperatura)
humidity500_co2.append(s.humidity)
co2500_co2.append(s.co2)
barometric_pressure500_co2.append(s.barometric_pressure)
n500_co2=n500_co2+1
data500_co2 = pd.DataFrame()
data500_co2["Time"]=time500_co2
data500_co2["Temperature"]=temperature500_co2
data500_co2["Humidity"]=humidity500_co2
data500_co2["Co2"]=co2500_co2
data500_co2["Barometric_Pressure"]=barometric_pressure500_co2
minCo2 = min(data500_co2['Co2'])
maxCo2 = max(data500_co2['Co2'])
minBarometricPressure = min(data500_co2['Barometric_Pressure'])
maxBarometricPressure = max(data500_co2['Barometric_Pressure'])
minHum = min(data500_co2['Humidity'])
maxHum = max(data500_co2['Humidity'])
minTemp = min(data500_co2['Temperature'])
maxTemp = max(data500_co2['Temperature'])
minTime = min(data500_co2['Time'])
maxTime = max(data500_co2['Time'])
#
source = data500_co2
source = pd.DataFrame(source)
source.head()
# set a title for your dashboard
title = '## Sensor EM500_CO2'
subtitle = 'This dashboard allows you to browse the values of the EM500_CO2 sensor during selected variants or periods of time.'
# create list of company names (tickers)
tickers = ['Temperature', 'Humidity', 'Co2', 'Barometric_Pressure']
# this creates the dropdown widget
ticker = pn.widgets.Select(name='Variant', options=tickers)
# this creates the date range slider
date_range_slider = pn.widgets.DateRangeSlider(
name='Date Slider',
start=minTime, end=maxTime,
value=(minTime, maxTime)
)
@pn.depends(ticker.param.value, date_range_slider.param.value)
def get_plot(ticker, date_range):
brush = alt.selection_interval()
df = data500_co2
df['Time'] = pd.to_datetime(df['Time'])
start_date, end_date = date_range
mask = (df['Time'] > start_date) & (df['Time'] <= end_date)
dfm = df.loc[mask]
pointsTempHum = alt.Chart(dfm).mark_line().encode(
x = 'Time:T',
y = ticker,
# color=alt.condition(brush, alt.Color('Humidity:N', legend=None), alt.value('lightgray'))
).properties(
width=350,
height=150,
)
return pointsTempHum
dashboard = pn.Row(
pn.Column(title, subtitle, ticker, date_range_slider),
get_plot # draw chart function!
)
dashboard.save('./graficos/templates/graficos/pruebaspanel.html')
return render(request,'graficos/pruebaspanel.html',{})
This is my html (automatic generated)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Panel</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-2.3.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.3.3.min.js"></script>
<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.3.3.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/@holoviz/panel@0.12.1/dist/panel.min.js"></script>
<script type="text/javascript">
Bokeh.set_log_level("info");
</script>
</head>
<body>
<div class="bk-root" id="8eb52df0-8b2a-4f26-b509-31385c21c4fe" data-root-id="1002"></div>
<script type="application/json" id="1023">
{"6aa2df4e-83aa-4159-93dc-aec877a18651":{"defs":[{"extends":null,"module":null,"name":"ReactiveHTML1","overrides":[],"properties":[]},{"extends":null,"module":null,"name":"FlexBox1","overrides":[],"properties":[{"default":"flex-start","kind":null,"name":"align_content"},{"default":"flex-start","kind":null,"name":"align_items"},{"default":"row","kind":null,"name":"flex_direction"},{"default":"wrap","kind":null,"name":"flex_wrap"},{"default":"flex-start","kind":null,"name":"justify_content"}]},{"extends":null,"module":null,"name":"TemplateActions1","overrides":[],"properties":[{"default":0,"kind":null,"name":"open_modal"},{"default":0,"kind":null,"name":"close_modal"}]},{"extends":null,"module":null,"name":"MaterialTemplateActions1","overrides":[],"properties":[{"default":0,"kind":null,"name":"open_modal"},{"default":0,"kind":null,"name":"close_modal"}]}],"roots":{"references":[{"attributes":{},"id":"1012","type":"Selection"},{"attributes":{"end":1651903248000.0,"margin":[5,10,5,10],"start":1651661759000.0,"title":"Date Slider","value":[1651661759000.0,1651903248000.0]},"id":"1007","type":"DateRangeSlider"},{"attributes":{},"id":"1011","type":"UnionRenderers"},{"attributes":{"children":[{"id":"1003"},{"id":"1008"}],"margin":[0,0,0,0],"name":"Row00113"},"id":"1002","type":"Row"},{"attributes":{"data":{"$schema":"https://vega.github.io/schema/vega-lite/v4.8.1.json","config":{"view":{"continuousHeight":300,"continuousWidth":400}},"data":{"name":"data-2e95757d50a3a09167f607ba31594ff8"},"datasets":{},"encoding":{"x":{"field":"Time","type":"temporal"},"y":{"field":"Temperature","type":"quantitative"}},"height":150,"mark":"line","width":350},"data_sources":{"data-2e95757d50a3a09167f607ba31594ff8":{"id":"1009"}},"height":322,"margin":[5,5,5,5],"width":422},"id":"1010","type":"panel.models.vega.VegaPlot"},{"attributes":{"children":[{"id":"1010"}],"margin":[0,0,0,0],"name":"Row00110"},"id":"1008","type":"Row"},{"attributes":{"css_classes":["markdown"],"margin":[5,5,5,5],"name":"Markdown00103","text":"&lt;p&gt;This dashboard allows you to browse the values of the EM500_CO2 sensor during selected variants or periods of time.&lt;/p&gt;"},"id":"1005","type":"panel.models.markup.HTML"},{"attributes":{"css_classes":["markdown"],"margin":[5,5,5,5],"name":"Markdown00101","text":"&lt;h2&gt;Sensor EM500_CO2&lt;/h2&gt;"},"id":"1004","type":"panel.models.markup.HTML"},{"attributes":{"children":[{"id":"1004"},{"id":"1005"},{"id":"1006"},{"id":"1007"}],"margin":[0,0,0,0],"name":"Column00105"},"id":"1003","type":"Column"},{"attributes":{"margin":[5,10,5,10],"options":["Temperature","Humidity","Co2","Barometric_Pressure"],"title":"Variant","value":"Temperature"},"id":"1006","type":"Select"},{"attributes":{"data":{"Barometric_Pressure":{"__ndarray__":"x,"dtype":"float64","order":"little","shape":[336]},"index":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100,101,102,103,104,105,106,107,108,109,110,111,112,113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140,141,142,143,144,145,146,147,148,149,150,151,152,153,154,155,156,157,158,159,160,161,162,163,164,165,166,167,168,169,170,171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190,191,192,193,194,195,196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281,282,283,284,285,286,287,288,289,290,291,292,293,294,295,296,297,298,299,300,301,302,303,304,305,306,307,308,309,310,311,312,313,314,315,316,317,318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336]},"selected":{"id":"1012"},"selection_policy":{"id":"1011"}},"id":"1009","type":"ColumnDataSource"}],"root_ids":["1002"]},"title":"Bokeh Application","version":"2.3.3"}}
</script>
<script type="text/javascript">
(function() {
var fn = function() {
Bokeh.safely(function() {
(function(root) {
function embed_document(root) {
var docs_json = document.getElementById('1023').textContent;
var render_items = [{"docid":"6aa2df4e-83aa-4159-93dc-aec877a18651","root_ids":["1002"],"roots":{"1002":"8eb52df0-8b2a-4f26-b509-31385c21c4fe"}}];
root.Bokeh.embed.embed_items(docs_json, render_items);
}
if (root.Bokeh !== undefined) {
embed_document(root);
} else {
var attempts = 0;
var timer = setInterval(function(root) {
if (root.Bokeh !== undefined) {
clearInterval(timer);
embed_document(root);
} else {
attempts++;
if (attempts > 100) {
clearInterval(timer);
console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
}
}
}, 10, root)
}
})(window);
});
};
if (document.readyState != "loading") fn();
else document.addEventListener("DOMContentLoaded", fn);
})();
</script>
</body>
</html>