streamlit

1
# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2024)
2
#
3
# Licensed under the Apache License, Version 2.0 (the "License");
4
# you may not use this file except in compliance with the License.
5
# You may obtain a copy of the License at
6
#
7
#     http://www.apache.org/licenses/LICENSE-2.0
8
#
9
# Unless required by applicable law or agreed to in writing, software
10
# distributed under the License is distributed on an "AS IS" BASIS,
11
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12
# See the License for the specific language governing permissions and
13
# limitations under the License.
14

15
import numpy as np
16
from bokeh.layouts import column, row
17
from bokeh.models import ColumnDataSource, CustomJS, Slider
18
from bokeh.plotting import figure
19

20
import streamlit as st
21

22
x = [1, 2, 3, 4, 5]
23
y = [6, 7, 2, 4, 5]
24

25
p = figure(title="simple line example", x_axis_label="x", y_axis_label="y")
26
p.line(x, y, legend="Trend", line_width=2)
27
st.bokeh_chart(p)
28

29
# draw charts in columns
30

31
left_chart = figure(title="Left", x_axis_label="x", y_axis_label="y")
32
left_chart.line(x, y, legend="Trend", line_width=2)
33

34
right_chart = figure(title="Right", x_axis_label="x", y_axis_label="y")
35
right_chart.line(x, y, legend="Trend", line_width=2)
36

37
col1, col2 = st.columns([1, 1])
38

39
with col1:
40
    st.bokeh_chart(left_chart, use_container_width=True)
41

42
with col2:
43
    st.bokeh_chart(right_chart, use_container_width=True)
44

45
x = np.linspace(0, 10, 500)
46
y = np.sin(x)
47

48
source = ColumnDataSource(data=dict(x=x, y=y))
49

50
plot = figure(y_range=(-10, 10), width=400, height=400)
51

52
plot.line("x", "y", source=source, line_width=3, line_alpha=0.6)
53

54
amp = Slider(start=0.1, end=10, value=1, step=0.1, title="Amplitude")
55
freq = Slider(start=0.1, end=10, value=1, step=0.1, title="Frequency")
56
phase = Slider(start=-6.4, end=6.4, value=0, step=0.1, title="Phase")
57
offset = Slider(start=-9, end=9, value=0, step=0.1, title="Offset")
58

59
callback = CustomJS(
60
    args=dict(source=source, amp=amp, freq=freq, phase=phase, offset=offset),
61
    code="""
62
    const A = amp.value
63
    const k = freq.value
64
    const phi = phase.value
65
    const B = offset.value
66

67
    const x = source.data.x
68
    const y = Array.from(x, (x) => B + A*Math.sin(k*x+phi))
69
    source.data = { x, y }
70
""",
71
)
72

73
amp.js_on_change("value", callback)
74
freq.js_on_change("value", callback)
75
phase.js_on_change("value", callback)
76
offset.js_on_change("value", callback)
77

78
st.bokeh_chart(row(plot, column(amp, freq, phase, offset)))
79