On Apr 18, 2016, at 4:34 AM, Andy Baker <[email protected]> wrote:
------=_Part_7876_655449962.1460972087549
Content-Type: multipart/alternative;
boundary="----=_Part_7877_1412892260.1460972087550"
------=_Part_7877_1412892260.1460972087550
Content-Type: text/plain; charset=UTF-8
Apologies for not replying to Bryan's request for elaboration. This is a
side project that I'm only dipping into intermittently.
I've rather lost track of what things I struggled with but I'll try and
recall my issues in a general sense:
1. It wasn't clear what the CDN url was for the widgets library.
2. The fact that widgets needed a separate js include wasn't documented.
3. The distinction between plots, charts and figures wasn't clear.
4. It appears that controlling high-level charts from widgets isn't
currently possible (there's no source attribute available). Considering the
docs guide you initially towards high-level charts then switch to talking
about the lower-level level APIs when discussing interactivity threw me off
the scent for a while.
Is there an intention to support interactions in the high-level APIs?
Although the figure API is fairly simple it doesn't seem to offer a simple
way to create bar charts without manually drawing rectangles. And
implementing maps via the lower-level APIs looks fairly tricky. Other chart
types look simpler but there's still a leap between charts and low-level
plots that you're forced to make if you want to integrate widgets.
My dream API would consist of declaring data, charts, layouts and widgets
in Python and for most simple cases - describing how the widgets affect the
chart also within Python (maybe via some short js callback declarations).
Something like this:
plot = Bar(
data=data,
label='level',
values='items',
group='type',
legend='top_right',
)
callback = CustomJs(args=dict(bar=plot), code="""
var data = source.get('data');
data.filter(data['items'], cb_obj.get('value'));
source.trigger('change');
""")
slider = Slider(start=0.1, end=4, value=1, step=.1, title="power", callback=callback)
layout = vform(slider, plot)
bokeh_script, bokeh_html = components(layout)
return TemplateResponse(
request,
'bar_chart.html',
{'bokeh_script': bokeh_script, 'bokeh_html': [bokeh_html]},
)
On Saturday, 2 April 2016 22:27:17 UTC+1, Bryan Van de ven wrote:
Hi Andy,
can you elaborate on:
I was so close but the docs led me astray.
This is an especially important features, so if there is something
misleading or missing about the docs, we would want to improve them.
Thanks,
Bryan
On Mar 31, 2016, at 8:14 AM, Andy Baker <and...@gmail.com <javascript:>> >> wrote:
Marvellous. Even the callbacks work.
I was so close but the docs led me astray. All I needed was:
def bar_chart(request):
bokeh_script, charts = components(Button(label='hello'))
return TemplateResponse(
request,
'bar_chart.html',
{'bokeh_script': bokeh_script, 'charts': charts,}
)
and this in my template:
<link href="http://cdn.pydata.org/bokeh/release/bokeh-0.11.0.css"
rel="stylesheet">
<link href="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.11.0.css"
rel="stylesheet">
<script src="http://cdn.pydata.org/bokeh/release/bokeh-0.11.0.js"></script>
<script src="http://cdn.pydata.org/bokeh/release/bokeh-widgets-0.11.0.js"></script>
On Wednesday, 30 March 2016 15:16:40 UTC+1, lcan...@continuum.io wrote:
This NYU project uses Bokeh plots served as part of a cherrypy web
application:
Here's the app route that's serving the plot:
https://github.com/ViDA-NYU/domain_discovery_tool/blob/canavandl/domain_xfilter/vis/server.py#L375
Here's the template that it's rendering into:
https://github.com/ViDA-NYU/domain_discovery_tool/blob/canavandl/domain_xfilter/vis/html/cross_filter.html
Looking at your code. I wouldn't include the CDN in your `components`
method call (I think that's a deprecated API and doesn't do anything). Then
you'll have to make sure that you're loading bokeh-widgets resources (JS
and CSS) as a style and script in your template, either from a local
directory or CDN.
Resources docs:
http://bokeh.pydata.org/en/latest/docs/user_guide/embed.html#components
As for the error message you're seeing, it happens when you have a bokeh
component that doesn't have a corresponding BokehJS component. It sometimes
happens if you have a mismatch between Bokeh and BokehJS versions, so that
might be something to check.
Let us know if that doesn't work.
lukec
On Wednesday, March 30, 2016 at 3:09:42 AM UTC-5, Andy Baker wrote:
In that case I'm doing something stupid. Something like this:
def widget_test(request):
charts = [Button(label="hello")]
scripts, charts = components(charts, CDN)
return TemplateResponse(
request,
'bar_chart.html', {"scripts": scripts, "charts": charts,},
)
(which works perfectly when I swap in a Chart for a button) gives:
Module `Button' does not exists. The problem may be two fold. Either
a model was requested that's available in an extra bundle, e.g. a widget,
or a custom model was requested, but it wasn't registered before first
usage.'
I've tried loading bokeh_widgets.js - this gives a different error.
And I've tried adding the button to various layout elements instead of
passing it directly to components() and I get a similar error.
Is there any example code I could see?
On Monday, 28 March 2016 17:29:37 UTC+1, lcan...@continuum.io wrote:
It's entirely possible to use Bokeh widgets in a traditional web
framework. Generating the widgets is pretty straightforward, the only
additional work is to add the interactivity that you want the widgets to
perform. There are several Bokeh-native ways to add callbacks (
Interaction — Bokeh 3.3.2 Documentation)
or you can write your own client-side javascript and on-change listener.
On Monday, March 28, 2016 at 6:53:05 AM UTC-5, Andy Baker wrote:
Hi,
I'm using bokeh.embed.components to generate bokeh plots inside a Django
app. I'm really keen to avoid using bokeh server due to the increase in
deployment and maintenance complexity.
I understand that Bokeh has limited functionality without the server but
the docs aren't terribly clear on exactly what is and isn't possible. I
wanted to generate some widgets and then figure out how to control a
client-side plot using them. It seems tantalizingly close to being
possible.
Am I barking up the wrong tree? Is serverless bokeh something that you
consider a viable setup or is it more of a curiosity?
--
You received this message because you are subscribed to the Google
Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send
an email to bokeh+un...@continuum.io <javascript:>.
To post to this group, send email to bo...@continuum.io <javascript:>.
To view this discussion on the web visit
https://groups.google.com/a/continuum.io/d/msgid/bokeh/4284d9ba-5a4b-469a-9bd5-3c4eba2eaf02%40continuum.io\.
For more options, visit
https://groups.google.com/a/continuum.io/d/optout\.
--
You received this message because you are subscribed to the Google Groups "Bokeh Discussion - Public" group.
To unsubscribe from this group and stop receiving emails from it, send an email to [email protected].
To post to this group, send email to [email protected].
To view this discussion on the web visit https://groups.google.com/a/continuum.io/d/msgid/bokeh/183747cf-7cc1-4967-a96f-c972fdd8644d%40continuum.io\.
For more options, visit https://groups.google.com/a/continuum.io/d/optout\.
------=_Part_7877_1412892260.1460972087550
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable
<div dir=3D"ltr">Apologies for not replying to Bryan's request for elab=
oration. This is a side project that I'm only dipping into intermittent=
ly.<div><br></div><div>I've rather lost track of what things I struggle=
d with but I'll try and recall my issues in a general sense:</div><div>=
<br></div><div>1. It wasn't clear what the CDN url was for the widgets =
library.</div><div>2. The fact that widgets needed a separate js include wa=
sn't documented.</div><div>3. The distinction between plots, charts and=
figures wasn't clear.</div><div>4. It appears that controlling high-le=
vel charts from widgets isn't currently possible (there's no source=
attribute available). Considering the docs guide you initially towards hig=
h-level charts then switch to talking about the lower-level level APIs when=
discussing interactivity threw me off the scent for a while.</div><div><br=
</div><div>Is there an intention to support interactions in the high-level=
APIs? Although the figure API is fairly simple it doesn't seem to offe=
r a simple way to create bar charts without manually drawing rectangles. An=
d implementing maps via the lower-level APIs looks fairly tricky. Other cha=
rt types look simpler but there's still a leap between charts and low-l=
evel plots that you're forced to make if you want to integrate widgets.=
</div><div><br></div><div>My dream API would consist of declaring data, cha=
rts, layouts and widgets in Python and for most simple cases - describing h=
ow the widgets affect the chart also within Python (maybe via some short js=
callback declarations). Something like this:</div><div><br></div><div><pre=
style=3D"color: rgb(0, 0, 0); font-family: Menlo; font-size: 9pt;">plot =
=3D Bar(<br> <span style=3D"color:#660099;">data</span>=3Ddata,<br> <=
span style=3D"color:#660099;">label</span>=3D<span style=3D"color:#008000;f=
ont-weight:bold;">'level'</span>,<br> <span style=3D"color:#6600=
99;">values</span>=3D<span style=3D"color:#008000;font-weight:bold;">'i=
tems'</span>,<br> <span style=3D"color:#660099;">group</span>=3D<spa=
n style=3D"color:#008000;font-weight:bold;">'type'</span>,<br> <=
span style=3D"color:#660099;">legend</span>=3D<span style=3D"color:#008000;=
font-weight:bold;">'top_right'</span>,<br>)<br><br>callback =3D Cus=
tomJs(<span style=3D"color:#660099;">args</span>=3D<span style=3D"color:#00=
0080;">dict</span>(<span style=3D"color:#660099;">bar</span>=3Dplot), <span=
style=3D"color:#660099;">code</span>=3D<span style=3D"color:#008000;font-w=
eight:bold;">"""<br></span><span style=3D"color:#008000;font=
-weight:bold;"> var data =3D source.get('data');</span><br><=
/pre><pre style=3D"color: rgb(0, 0, 0); font-family: Menlo; font-size: 9pt;=
"><span style=3D"color:#008000;font-weight:bold;"> data.filter(</spa=
><span style=3D"color: rgb(0, 128, 0); font-weight: bold; font-size: 9pt;"=
data['items']</span><span style=3D"font-size: 9pt; color: rgb(0, 1=
28, 0); font-weight: bold;">,=C2=A0</span><span style=3D"font-size: 9pt; co=
lor: rgb(0, 128, 0); font-weight: bold;">cb_obj.get('value')</span>=
<span style=3D"font-size: 9pt; color: rgb(0, 128, 0); font-weight: bold;">)=
;</span></pre><pre style=3D"color: rgb(0, 0, 0); font-family: Menlo; font-s=
ize: 9pt;"><span style=3D"color:#008000;font-weight:bold;"> source.t=
rigger('change');<br></span><span style=3D"color:#008000;font-weigh=
t:bold;"> """</span>)<br><br>slider =3D Slider(<span styl=
e=3D"color:#660099;">start</span>=3D<span style=3D"color:#0000ff;">0.1</spa=
>, <span style=3D"color:#660099;">end</span>=3D<span style=3D"color:#0000f=
f;">4</span>, <span style=3D"color:#660099;">value</span>=3D<span style=3D"=
color:#0000ff;">1</span>, <span style=3D"color:#660099;">step</span>=3D<spa=
n style=3D"color:#0000ff;">.1</span>, <span style=3D"color:#660099;">title<=
/span>=3D<span style=3D"color:#008000;font-weight:bold;">"power"<=
/span>, <span style=3D"color:#660099;">callback</span>=3Dcallback)<br>layou=
t =3D vform(slider, plot)<br>bokeh_script, bokeh_html =3D components(layout=
)<br><span style=3D"color:#000080;font-weight:bold;">return </span>Template=
Response(<br> request,<br> <span style=3D"color:#008000;font-weight:b=
old;">'bar_chart.html'</span>,<br> {'<span style=3D"color:#0=
08000;font-weight:bold;">bokeh_script'</span>: bokeh_script, <span styl=
e=3D"color:#008000;font-weight:bold;">'</span><span style=3D"font-size:=
9pt;">bokeh_html</span><span style=3D"font-size: 9pt; color: rgb(0, 128, 0=
); font-weight: bold;">'</span><span style=3D"font-size: 9pt;">: [</spa=
><span style=3D"font-size: 9pt;">bokeh_html</span><span style=3D"font-size=
: 9pt;">]},</span><br></pre><pre style=3D"color: rgb(0, 0, 0); font-family:=
Menlo; font-size: 9pt;">)</pre><br>On Saturday, 2 April 2016 22:27:17 UTC+=
1, Bryan Van de ven wrote:<blockquote class=3D"gmail_quote" style=3D"margi=
n: 0;margin-left: 0.8ex;border-left: 1px #ccc solid;padding-left: 1ex;">Hi =
Andy,=20
<br>
<br>can you elaborate on:
<br>
<br>> I was so close but the docs led me astray.=20
<br>
<br>This is an especially important features, so if there is something misl=
eading or missing about the docs, we would want to improve them.
<br>
<br>Thanks,
<br>
<br>Bryan
<br>
<br>
<br>
<br>> On Mar 31, 2016, at 8:14 AM, Andy Baker <<a href=3D"javascript:=
" target=3D"_blank" gdf-obfuscated-mailto=3D"zga0qOlNHAAJ" rel=3D"nofollow"=
onmousedown=3D"this.href=3D'javascript:';return true;" onclick=3D"=
this.href=3D'javascript:';return true;">[email protected]</a>> wr=
ote:
<br>>=20
<br>> Marvellous. Even the callbacks work.
<br>>=20
<br>> I was so close but the docs led me astray. All I needed was:
<br>>=20
<br>> def bar_chart(request):
<br>> =C2=A0 =C2=A0=20
<br>> =C2=A0 =C2=A0 bokeh_script, charts =3D components(Button(label=3D&=
#39;<wbr>hello'))
<br>> =C2=A0 =C2=A0=20
<br>> =C2=A0 =C2=A0 return TemplateResponse(
<br>> =C2=A0 =C2=A0 =C2=A0 =C2=A0 request,
<br>> =C2=A0 =C2=A0 =C2=A0 =C2=A0 'bar_chart.html',
<br>> =C2=A0 =C2=A0 =C2=A0 =C2=A0 {'bokeh_script': bokeh_script,=
'charts': charts,}
<br>> =C2=A0 =C2=A0 )
<br>>=20
<br>> and this in my template:
<br>>=20
<br>> <link href=3D"<a href=3D"http://cdn.pydata.org/bokeh/relea=
se/bokeh-0.11.0.css" target=3D"_blank" rel=3D"nofollow" onmousedown=3D"this=
.href=3D'Redirect Notice
keh%2Frelease%2Fbokeh-0.11.0.css\46sa\75D\46sntz\0751\46usg\75AFQjCNE-K8n3s=
6O2dwU748m894V2qRTFEQ';return true;" onclick=3D"this.href=3D'http:/=
/www.google.com/url?q\75http%3A%2F%2Fcdn.pydata.org%2Fbokeh%2Frelease%2Fbok=
eh-0.11.0.css\46sa\75D\46sntz\0751\46usg\75AFQjCNE-K8n3s6O2dwU748m894V2qRTF=
EQ';return true;">http://cdn.pydata.org/<wbr>bokeh/release/bokeh\-0\.11\.0=
.css</a><wbr>" rel=3D"stylesheet">
<br>> <link href=3D"<a href=3D"http://cdn.pydata.org/bokeh/relea=
se/bokeh-widgets-0.11.0.css" target=3D"_blank" rel=3D"nofollow" onmousedown=
=3D"this.href=3D'Redirect Notice
org%2Fbokeh%2Frelease%2Fbokeh-widgets-0.11.0.css\46sa\75D\46sntz\0751\46usg=
\75AFQjCNEVv6qn4dX1HVGR-pAaT0E_fBH8jQ';return true;" onclick=3D"this.hr=
ef=3D'Redirect Notice
%2Frelease%2Fbokeh-widgets-0.11.0.css\46sa\75D\46sntz\0751\46usg\75AFQjCNEV=
v6qn4dX1HVGR-pAaT0E_fBH8jQ';return true;">http://cdn.pydata.org/<wbr>bo=
keh/release/bokeh-widgets-0.<wbr>11.0.css</a>" rel=3D"stylesheet&=
quot;>
<br>> <script src=3D"<a href=3D"http://cdn.pydata.org/bokeh/rele=
ase/bokeh-0.11.0.js" target=3D"_blank" rel=3D"nofollow" onmousedown=3D"this=
.href=3D'Redirect Notice
keh%2Frelease%2Fbokeh-0.11.0.js\46sa\75D\46sntz\0751\46usg\75AFQjCNFQn1sTAc=
TivwBdovqPP7gipZF-Wg';return true;" onclick=3D"this.href=3D'http://=
Redirect Notice\75http%3A%2F%2Fcdn.pydata.org%2Fbokeh%2Frelease%2Fboke=
h-0.11.0.js\46sa\75D\46sntz\0751\46usg\75AFQjCNFQn1sTAcTivwBdovqPP7gipZF-Wg=
';return true;">http://cdn.pydata.org/<wbr>bokeh/release/bokeh\-0\.11\.0\.j=
s</a>"<wbr>></script>
<br>> <script src=3D"<a href=3D"http://cdn.pydata.org/bokeh/rele=
ase/bokeh-widgets-0.11.0.js" target=3D"_blank" rel=3D"nofollow" onmousedown=
=3D"this.href=3D'Redirect Notice
org%2Fbokeh%2Frelease%2Fbokeh-widgets-0.