2016-01-08 4 views
5

Bokehのトグルボタンを使用してインタラクティブなWebサイトを作成しようとしています。ここで、どのグラフをプロットするかを選択するためのトグルボタンをクリックできます。ボタン上のファイルからグラフデータをロードbokehでクリック

ボタンは、テキストファイル(xとyの2つのデータを含む)からデータを読み込みます。データファイルには、xとyのデータを含む2つの列がスペースで区切られています。

トグルボタンを選択すると、対応するデータがプロットされ、トグルボタンの選択が解除されるとプロットが削除されます。

私は現在、コールバックイベントに引数を渡すことができません。可能でしょうか?

from bokeh.io import vform 
from bokeh.models import CustomJS, ColumnDataSource 
from bokeh.models.widgets import Toggle 
from bokeh.plotting import figure, output_file, show 

output_file("load_data_buttons.html") 

x = [0] 
y = x 

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

plot = figure(plot_width=400, plot_height=400) 
plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6) 

callback = CustomJS(args=filename,dict(source=source), code=""" 
     var data = source.get('data'); 
     console.log(filename) 
     x = data['x'] 
     y = data['y'] 
     #load data stored in the file name and assign to x and y 
     source.trigger('change'); 
    """) 

toggle1 = Toggle(label="Load data file 1", type="success",callback=callback("data_file_1.txt")) 
toggle2 = Toggle(label="Load data file 2", type="success",callback=callback("data_file_2.txt")) 

layout = vform(toggle1, toggle2, plot) 

show(layout) 

答えて

2

次の2つのファイルをロードし、DataSourceオブジェクトにデータを保存する必要があり、ここでの例です:回答HYRYため

from bokeh.io import vplot 
import pandas as pd 
from bokeh.models import CustomJS, ColumnDataSource 
from bokeh.models.widgets import Button 
from bokeh.plotting import figure, output_file, show 

output_file("load_data_buttons.html") 

df1 = pd.read_csv("data_file_1.txt") 
df2 = pd.read_csv("data_file_2.txt") 

plot = figure(plot_width=400, plot_height=400) 

source = ColumnDataSource(data=dict(x=[0, 1], y=[0, 1])) 
source2 = ColumnDataSource(data=dict(x1=df1.x.values, y1=df1.y.values, 
            x2=df2.x.values, y2=df2.y.values)) 

plot.line('x', 'y', source=source, line_width=3, line_alpha=0.6) 

callback = CustomJS(args=dict(source=source, source2=source2), code=""" 
     var data = source.get('data'); 
     var data2 = source2.get('data'); 
     data['x'] = data2['x' + cb_obj.get("name")]; 
     data['y'] = data2['y' + cb_obj.get("name")]; 
     source.trigger('change'); 
    """) 

toggle1 = Button(label="Load data file 1", callback=callback, name="1") 
toggle2 = Button(label="Load data file 2", callback=callback, name="2") 

layout = vplot(toggle1, toggle2, plot) 

show(layout) 
+0

感謝。これは本当にうれしいことですが、唯一の問題は何百ものデータファイルがあり、結果として多くのデータが得られることです。これは長い時間がかかるので、私はあらかじめすべてを事前にロードしたくはありません。ボタンがクリックされるとデータをロードする方法を知っていますか? – Jon

+1

次に、csvファイルを解析するためのjavascript関数を作成する必要があります。ここに例があります:http://stackoverflow.com/questions/7431268/how-to-read-data-from-csv-file-using-javascript – HYRY

+0

ありがとうこの回答の組み合わせは私の問題を解決しました。とても有難い。 – Jon

関連する問題