Bokehグラフと表の組み合わせ_html出力

from bokeh.plotting import figure, output_file, show
from bokeh.models import DatetimeTickFormatter
from bokeh.models import ColumnDataSource, HoverTool, CrosshairTool, NumeralTickFormatter
from bokeh.models.widgets import Button, Select, RadioGroup, TextInput, TableColumn, DataTable
from bokeh.models.widgets import DateFormatter

from bokeh.layouts import Column, Row
from bokeh.plotting import curdoc
import pandas as pd
import datetime

出力HTMLファイルパスを指定

df = pd.read_csv("stockchart_20201115.csv")

output_file("graph1.html", mode="inline")

描画レイアウト

source = ColumnDataSource(df)

output_file("graph1.html", mode="inline")
df['日付']=pd.to_datetime(df['日付'])

data = {'x' : df["日付"],
'y' : df["始値"],
'y_end': df["終値"],
'y_start' : df["始値"]
}

source = ColumnDataSource(data= data)

p = figure(
title="simple line example",
plot_width=1000,
plot_height=500,
x_axis_type="datetime",
y_axis_label ="日経平均株価",
x_axis_label ="日時"
)

プロットに判例と線の暑さを指定したrenderer(今回は折れ線グラフ)を追加

p.line('x', 'y', source = source)

吹き出し

hover = HoverTool(
tooltips=[
("Date", "$x{%F}"),
("始値", "$y{0,0}"),
("終値", "@y_end{0,0}")

],
formatters={"$x": "datetime"},
mode="vline",
show_arrow=False, # 矢印を消します
)

columns = [
TableColumn(field="x", title="One", formatter=DateFormatter()),
TableColumn(field="y", title=" Two")
]

表を表示

data_table = DataTable(source=source, columns=columns,selectable = True,
sortable = True, width=600, height=500, fit_columns=False)

layout = Row(p,data_table)

結果を描画

show(layout)