Slider Title Visible Slider It Self Is Not Visible

I think I am doing something wrong. Slider is not not visible so it is not effective.

I send the code below.

Thank you

‘’'This example demonstrates embedding a standalone Bokeh document

into a simple Flask application, with a basic HTML web form.

To view the example, run:

python simple.py

in this directory, and navigate to:

http://localhost:5000

‘’’

from future import print_function

import flask

from math import sin,pi

from bokeh.models import Slider,CustomJS,ColumnDataSource

from bokeh.embed import components

from bokeh.plotting import figure

from bokeh.resources import INLINE,CDN

from bokeh.util.string import encode_utf8

from bokeh.io import output_file, show, vform

app = flask.Flask(name)

colors = {

‘Black’: ‘#000000’,

‘Red’: ‘#FF0000’,

‘Green’: ‘#00FF00’,

‘Blue’: ‘#0000FF’,

}

def getitem(obj, item, default):

if item not in obj:

return default

else:

return obj[item]

x=[x*0.01 for x in range(1000)]

y=[sin(2pi1*x) for x in x]

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

callback = CustomJS(args=dict(source=source), code="""

var data = source.get(‘data’);

var f = cb_obj.get(‘value’)

x = data[‘x’]

y = data[‘y’]

for (i = 0; i < x.length; i++) {

y[i] = Math.sin(2Math.pix[i]*f)

}

source.trigger(‘change’);

“”")

slider = Slider(start=10, end=50, value=1, step=1, title=“power”, callback=callback)

@app.route("/")

def polynomial():

“”" Very simple embedding of a polynomial chart

“”"

Grab the inputs arguments from the URL

This is automated by the button

args = flask.request.args

Get all the form arguments in the url with defaults

color = colors[getitem(args, ‘color’, ‘Black’)]

_from = int(getitem(args, ‘_from’, 0))

to = int(getitem(args, ‘to’, 10))

Create a polynomial line graph

x = list(range(_from, to + 1))

fig = figure(title=“Polynomial”)

fig.line(x, [i ** 2 for i in x], color=color, line_width=2)

#fig.add_tools(slider)

Configure resources to include BokehJS inline in the document.

For more details see:

http://bokeh.pydata.org/en/latest/docs/reference/resources_embedding.html#bokeh-embed

js_resources = INLINE.render_js()

css_resources = CDN.render_css()

#ss=vform(slider)

elemanlar={‘fig’:fig,‘slider’:slider}

For more details see:

http://bokeh.pydata.org/en/latest/docs/user_guide/embedding.html#components

#script, divs = components(fig,INLINE)

script, divs = components(elemanlar)

print (divs)

html = flask.render_template(

‘embed.html’,

plot_script=script,

plot_div=divs,

js_resources=js_resources,

css_resources=css_resources,

color=color,

_from=_from,

to=to

)

return encode_utf8(html)

if name == “main”:

print(doc)

app.run(debug=True)

···

#####################################

<!doctype html>

Embed Demo

{{ js_resources|indent(4)|safe }}

{{ css_resources|indent(4)|safe }}

{{ plot_script|indent(4)|safe }}

Select your settings:

Color:

Red Green Blue Black

From:


To:


Submit

{{ plot_div[‘fig’]|indent(4)|safe }}

{{plot_div[‘slider’]|safe}}

Demonstrates some very simple embedding into a webpage

There is a known issue with "bare" widgets that is currently being worked on. In the mean time, put the slider in an HBox (or VBox) and it will appear.

Thanks,

Bryan

···

On Apr 20, 2016, at 5:48 PM, Burak nebioğlu <[email protected]> wrote:

I think I am doing something wrong. Slider is not not visible so it is not effective.

I send the code below.

Thank you

'''This example demonstrates embedding a standalone Bokeh document
into a simple Flask application, with a basic HTML web form.

To view the example, run:

    python simple.py

in this directory, and navigate to:

    http://localhost:5000

'''
from __future__ import print_function

import flask

from math import sin,pi
from bokeh.models import Slider,CustomJS,ColumnDataSource
from bokeh.embed import components
from bokeh.plotting import figure
from bokeh.resources import INLINE,CDN
from bokeh.util.string import encode_utf8
from bokeh.io import output_file, show, vform

app = flask.Flask(__name__)

colors = {
    'Black': '#000000',
    'Red': '#FF0000',
    'Green': '#00FF00',
    'Blue': '#0000FF',
}

def getitem(obj, item, default):
    if item not in obj:
        return default
    else:
        return obj[item]

x=[x*0.01 for x in range(1000)]
y=[sin(2*pi*1*x) for x in x]
source = ColumnDataSource(data=dict(x=x, y=y))

callback = CustomJS(args=dict(source=source), code="""
        var data = source.get('data');
        var f = cb_obj.get('value')
        x = data['x']
        y = data['y']
        for (i = 0; i < x.length; i++) {
            y[i] = Math.sin(2*Math.pi*x[i]*f)
        }
        source.trigger('change');
    """)

slider = Slider(start=10, end=50, value=1, step=1, title="power", callback=callback)

@app.route("/")
def polynomial():
    """ Very simple embedding of a polynomial chart

    """

    # Grab the inputs arguments from the URL
    # This is automated by the button
    args = flask.request.args

    # Get all the form arguments in the url with defaults
    color = colors[getitem(args, 'color', 'Black')]
    _from = int(getitem(args, '_from', 0))
    to = int(getitem(args, 'to', 10))

    # Create a polynomial line graph
    x = list(range(_from, to + 1))
    fig = figure(title="Polynomial")
    fig.line(x, [i ** 2 for i in x], color=color, line_width=2)
    #fig.add_tools(slider)
    # Configure resources to include BokehJS inline in the document.
    # For more details see:
    # http://bokeh.pydata.org/en/latest/docs/reference/resources_embedding.html#bokeh-embed
    js_resources = INLINE.render_js()
    css_resources = CDN.render_css()
    #ss=vform(slider)
    elemanlar={'fig':fig,'slider':slider}
    # For more details see:
    # http://bokeh.pydata.org/en/latest/docs/user_guide/embedding.html#components
    #script, divs = components(fig,INLINE)
    script, divs = components(elemanlar)
    print (divs)
    html = flask.render_template(
        'embed.html',
        plot_script=script,
        plot_div=divs,

        js_resources=js_resources,
        css_resources=css_resources,
        color=color,
        _from=_from,
        to=to
    )
    return encode_utf8(html)

if __name__ == "__main__":
    print(__doc__)
    app.run(debug=True)

#####################################

<!doctype html>
<html lang="en">
  <head>
    <meta charset='utf-8' />
    <meta http-equiv='content-type' content='text/html; charset=utf-8' />

    <title>Embed Demo</title>

    {{ js_resources|indent(4)|safe }}

    {{ css_resources|indent(4)|safe }}

    {{ plot_script|indent(4)|safe }}

  </head>
  <body>
    <!-- A simple form for changing the graph -->
    <p> Select your settings: </p>
    <form name="color_button" method='GET'>
        Color:
        <select name="color">
            <option value="Red">Red</option>
            <option value="Green">Green</option>
            <option value="Blue">Blue</option>
            <option selected="selected" value="Black">Black</option>
        </select>
        <br>
        From:
        <input type="text" name="_from" value="{{ _from }}">
        <br>
        To:
        <input type="text" name="to" value="{{ to }}">
        <br>
        <button type="submit">Submit</button>

    </form>

    {{ plot_div['fig']|indent(4)|safe }}
      {{plot_div['slider']|safe}}
    <p> Demonstrates some very simple embedding into a webpage</p>
  </body>
</html>

--
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/CA%2B5q9Xgoi54%3DfepnQ853sQSeM7jfDc38tG3-hG_xQ-4_cHTKSQ%40mail.gmail.com.
For more options, visit https://groups.google.com/a/continuum.io/d/optout.