Reload bokeh chart with flask POST

Community Support
1

I am rendering multiple bokeh charts using FLASK currently and everything is working great. I render the charts with

@app.route("/")

def Maestro():

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

For more details see:

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

html = flask.render_template(

‘embed.html’,

vioAll_script=vioAllScript,

vioClin_script=vioClinScript,

vioCoh_script=vioCohScript,

vioAll_div=vioAlldiv,

vioClin_div=vioClindiv,

vioCoh_div=vioCohdiv,

barAll_script=barAllScript,

barClin_script=barClinScript,

barCoh_script=barCohScript,

barAll_div=barAlldiv,

barClin_div=barClindiv,

barCoh_div=barCohdiv,

js_resources=js_resources,

css_resources=css_resources,

)

return encode_utf8(html)

``

However, I now have a POST request in FLASK that handles some input and recalculates charts to regraph. I am wondering what is the appropriate way to do this. My code is below.

@app.route("/refresh", methods=[“GET”, “POST”])

def Refresh():

message = None

startDate = request.form[“mydata”].encode(‘utf8’)

vioAll = refreshViolinPlot(startDate)

tabsAll = buildTabs(tabvioAll, tabBarAll)

vioAllScript, vioAlldiv = components(vioAll, tabsAll, INLINE)

result = (encode_utf8(vioAllScript))

resp = make_response(result)

html = flask.render_template(

‘embed.html’,

vioAll_script=vioAllScript,

vioAll_div=vioAlldiv,

js_resources=js_resources,

css_resources=css_resources

)

return resp

return encode_utf8(html)

``

I am trying to update only one bokeh chart with this POST method but I feel as if this attempt is wrong somewhere…

2

Well, I’ve taken this in a slightly different direction. I am now outputting the script of the new chart to the JS front end and executing the code there.

Enter def Refresh():

message = None

startDate = request.form[“mydata”].encode(‘utf8’)

vioAll = refreshViolinPlot(startDate)

vioAllScript, vioAlldiv = components(vioAll, wrap_script=False)

result = (encode_utf8(vioAllScript))

resp = make_response(result)

return respcode here...

``

However, the newly created chart has a new ID than the chart that already exists on the page when I execute the bokeh script on the front end. Is there an easy way for me to execute this script with to match the ID of the chart that exists on the page already?

···

On Thursday, August 11, 2016 at 1:51:15 PM UTC-4, Reuben Jacobs wrote:

I am rendering multiple bokeh charts using FLASK currently and everything is working great. I render the charts with

@app.route(“/”)

def Maestro():

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

For more details see:

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

html = flask.render_template(

‘embed.html’,

vioAll_script=vioAllScript,

vioClin_script=vioClinScript,

vioCoh_script=vioCohScript,

vioAll_div=vioAlldiv,

vioClin_div=vioClindiv,

vioCoh_div=vioCohdiv,

barAll_script=barAllScript,

barClin_script=barClinScript,

barCoh_script=barCohScript,

barAll_div=barAlldiv,

barClin_div=barClindiv,

barCoh_div=barCohdiv,

js_resources=js_resources,

css_resources=css_resources,

)

return encode_utf8(html)

``

However, I now have a POST request in FLASK that handles some input and recalculates charts to regraph. I am wondering what is the appropriate way to do this. My code is below.

@app.route(“/refresh”, methods=[“GET”, “POST”])

def Refresh():

message = None

startDate = request.form[“mydata”].encode(‘utf8’)

vioAll = refreshViolinPlot(startDate)

tabsAll = buildTabs(tabvioAll, tabBarAll)

vioAllScript, vioAlldiv = components(vioAll, tabsAll, INLINE)

result = (encode_utf8(vioAllScript))

resp = make_response(result)

html = flask.render_template(

‘embed.html’,

vioAll_script=vioAllScript,

vioAll_div=vioAlldiv,

js_resources=js_resources,

css_resources=css_resources

)

return resp

return encode_utf8(html)

``

I am trying to update only one bokeh chart with this POST method but I feel as if this attempt is wrong somewhere…

3

I would suggest
putting both the script and the div into your template dynamically.

I do this kind of thing in my some what
aging -
unfortunately its a

···

https://github.com/birdsarah/gtimelog-viz/ little complicated, but
hopefully you can get some mileage out of it.
On 8/11/16 11:47 AM, Reuben Jacobs
wrote:

    Well, I've taken this in a slightly different

direction. I am now outputting the script of the new chart to
the JS front end and executing the code there.

Enter def
Refresh():

message = None

            startDate =

request.form[“mydata”].encode(‘utf8’)

            vioAll =

refreshViolinPlot(startDate)

            vioAllScript, vioAlldiv =

components(vioAll, wrap_script=False)

            result =

(encode_utf8(vioAllScript))

            resp =

make_response(result)

return respcode here…

``

      However, the newly created chart has a new ID than the

chart that already exists on the page when I execute the bokeh
script on the front end. Is there an easy way for me to
execute this script with to match the ID of the chart that
exists on the page already?

      On Thursday, August 11, 2016 at 1:51:15 PM UTC-4, Reuben

Jacobs wrote:

          I am rendering multiple bokeh charts using

FLASK currently and everything is working great. I render
the charts with

@app.route(“/”)

def Maestro():

                      # 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

For more details see:

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

html = flask.render_template(

‘embed.html’,

vioAll_script=vioAllScript,

vioClin_script=vioClinScript,

vioCoh_script=vioCohScript,

vioAll_div=vioAlldiv,

vioClin_div=vioClindiv,

vioCoh_div=vioCohdiv,

barAll_script=barAllScript,

barClin_script=barClinScript,

barCoh_script=barCohScript,

barAll_div=barAlldiv,

barClin_div=barClindiv,

barCoh_div=barCohdiv,

js_resources=js_resources,

css_resources=css_resources,

)

return encode_utf8(html)

``

            However, I now have a POST request in FLASK that

handles some input and recalculates charts to regraph. I
am wondering what is the appropriate way to do this. My
code is below.

                    @app.route("/refresh", methods=["GET",

“POST”])

def Refresh():

message = None

                    startDate =

request.form[“mydata”].encode(‘utf8’)

vioAll = refreshViolinPlot(startDate)

tabsAll = buildTabs(tabvioAll, tabBarAll)

                    vioAllScript, vioAlldiv =

components(vioAll, tabsAll, INLINE)

result = (encode_utf8(vioAllScript))

resp = make_response(result)

html = flask.render_template(

‘embed.html’,

vioAll_script=vioAllScript,

vioAll_div=vioAlldiv,

js_resources=js_resources,

css_resources=css_resources

)

return resp

return encode_utf8(html)

``

            I am trying to update only one bokeh chart with this

POST method but I feel as if this attempt is wrong
somewhere…

–

  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/c87ef13b-f6e8-4b23-9b9e-25dac00eab25%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/c87ef13b-f6e8-4b23-9b9e-25dac00eab25%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)
4

Hi Sarah,

So what I ended up doing was placing my chart in a custom div and on the JS side receive the appropriate HTML and script for the new chart and replacing the contents of my custom div with the new chart. Maybe this code can help someone down the line

def Refresh():

startDate = request.form[“mydata”].encode(‘utf8’)

vioAll = refreshViolinPlot(startDate)

vioAllScript, vioAllDiv = components(vioAll, wrap_script=False)

script = encode_utf8(vioAllScript)

div = encode_utf8(vioAllDiv)

return flask.jsonify(div=div, script=script)

``

function runPyScript(input){

var jqXHR = $.ajax({

type: “POST”,

url: “/refresh”,

async: true,

data: { mydata: input },

success: function(response){

	//process the returned HTML here

	//Empty the old div and insert the new div/script

	console.log("success: " + response);

	var vioAll = $("#vioAll");

	vioAll.empty();

	vioAll.append(response.div);

	jQuery.globalEval(response.script);

},

error: function(response) {

	console.log("error: " + response);

}

});

}

``

···

On Friday, August 12, 2016 at 6:30:20 AM UTC-4, Sarah Bird wrote:

      I would suggest

putting both the script and the div into your template dynamically.

I do this kind of thing in my some what
aging https://github.com/birdsarah/gtimelog-viz/ -
unfortunately its a little complicated, but
hopefully you can get some mileage out of it.

  On 8/11/16 11:47 AM, Reuben Jacobs > wrote:

    Well, I've taken this in a slightly different

direction. I am now outputting the script of the new chart to
the JS front end and executing the code there.

Enter def
Refresh():

message = None

            startDate =

request.form[“mydata”].encode(‘utf8’)

            vioAll =

refreshViolinPlot(startDate)

            vioAllScript, vioAlldiv =

components(vioAll, wrap_script=False)

            result =

(encode_utf8(vioAllScript))

            resp =

make_response(result)

return respcode here…

``

      However, the newly created chart has a new ID than the

chart that already exists on the page when I execute the bokeh
script on the front end. Is there an easy way for me to
execute this script with to match the ID of the chart that
exists on the page already?

      On Thursday, August 11, 2016 at 1:51:15 PM UTC-4, Reuben > > Jacobs wrote:

          I am rendering multiple bokeh charts using

FLASK currently and everything is working great. I render
the charts with

@app.route(“/”)

def Maestro():

                      # 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

For more details see:

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

html = flask.render_template(

‘embed.html’,

vioAll_script=vioAllScript,

vioClin_script=vioClinScript,

vioCoh_script=vioCohScript,

vioAll_div=vioAlldiv,

vioClin_div=vioClindiv,

vioCoh_div=vioCohdiv,

barAll_script=barAllScript,

barClin_script=barClinScript,

barCoh_script=barCohScript,

barAll_div=barAlldiv,

barClin_div=barClindiv,

barCoh_div=barCohdiv,

js_resources=js_resources,

css_resources=css_resources,

)

return encode_utf8(html)

``

            However, I now have a POST request in FLASK that

handles some input and recalculates charts to regraph. I
am wondering what is the appropriate way to do this. My
code is below.

                    @app.route("/refresh", methods=["GET",

“POST”])

def Refresh():

message = None

                    startDate =

request.form[“mydata”].encode(‘utf8’)

vioAll = refreshViolinPlot(startDate)

tabsAll = buildTabs(tabvioAll, tabBarAll)

                    vioAllScript, vioAlldiv =

components(vioAll, tabsAll, INLINE)

result = (encode_utf8(vioAllScript))

resp = make_response(result)

html = flask.render_template(

‘embed.html’,

vioAll_script=vioAllScript,

vioAll_div=vioAlldiv,

js_resources=js_resources,

css_resources=css_resources

)

return resp

return encode_utf8(html)

``

            I am trying to update only one bokeh chart with this

POST method but I feel as if this attempt is wrong
somewhere…

–

  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/c87ef13b-f6e8-4b23-9b9e-25dac00eab25%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/c87ef13b-f6e8-4b23-9b9e-25dac00eab25%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      <img alt="Continuum Analytics" src="https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000" height="30px" width="150px">
    ](http://continuum.io)
5

Cool, thanks for posting your solution.

···

On 8/12/16 7:38 AM, Reuben Jacobs
wrote:

Hi Sarah,

      So what I ended up doing was placing my chart in a custom

div and on the JS side receive the appropriate HTML and script
for the new chart and replacing the contents of my custom div
with the new chart. Maybe this code can help someone down the
line

def Refresh():

              startDate =

request.form[“mydata”].encode(‘utf8’)

              vioAll =

refreshViolinPlot(startDate)

              vioAllScript, vioAllDiv

= components(vioAll, wrap_script=False)

              script =

encode_utf8(vioAllScript)

              div =

encode_utf8(vioAllDiv)

              return

flask.jsonify(div=div, script=script)

``

                function

runPyScript(input){

                var jqXHR =

$.ajax({

type: “POST”,

                url:

“/refresh”,

async: true,

                data: {

mydata: input },

                  success:

function(response){

                      //process

the returned HTML here

                      //Empty

the old div and insert the new div/script

                      console.log("success:

" + response);

                      var

vioAll = $(“#vioAll”);

  vioAll.empty();

  vioAll.append(response.div);

  jQuery.globalEval(response.script);

},

                  error:

function(response) {

                      console.log("error:

" + response);

}

});

}

``

      On Friday, August 12, 2016 at 6:30:20 AM UTC-4, Sarah Bird

wrote:

                I would

suggest putting both the script and the div into
your template
dynamically.

                    I

do this kind of
thing in my somewhat aging https://github.com/birdsarah/gtimelog-viz/
- unfortunately its a little
complicated, but hopefully you can get
some mile age
out of it.

On 8/11/16 11:47 AM, Reuben Jacobs wrote:

              Well, I've taken this in a slightly

different direction. I am now outputting the script of
the new chart to the JS front end and executing the
code there.

Enter def
Refresh():

message = None

                      startDate =

request.form[“mydata”].encode(‘utf8’)

vioAll = refreshViolinPlot(startDate)

                      vioAllScript, vioAlldiv =

components(vioAll, wrap_script=False)

result = (encode_utf8(vioAllScript))

resp = make_response(result)

return respcode here…

``

                However, the newly created chart has a new ID

than the chart that already exists on the page when
I execute the bokeh script on the front end. Is
there an easy way for me to execute this script with
to match the ID of the chart that exists on the page
already?

                On Thursday, August 11, 2016 at 1:51:15 PM UTC-4,

Reuben Jacobs wrote:

                    I am rendering multiple bokeh

charts using FLASK currently and everything is
working great. I render the charts with

@app.route(“/”)

def Maestro():

                                # 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

For more details see:

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

html = flask.render_template(

‘embed.html’,

vioAll_script=vioAllScript,

vioClin_script=vioClinScript,

vioCoh_script=vioCohScript,

vioAll_div=vioAlldiv,

vioClin_div=vioClindiv,

vioCoh_div=vioCohdiv,

barAll_script=barAllScript,

barClin_script=barClinScript,

barCoh_script=barCohScript,

barAll_div=barAlldiv,

barClin_div=barClindiv,

barCoh_div=barCohdiv,

js_resources=js_resources,

css_resources=css_resources,

)

return encode_utf8(html)

``

                      However, I now have a POST request in FLASK

that handles some input and recalculates
charts to regraph. I am wondering what is the
appropriate way to do this. My code is below.

                              @app.route("/refresh",

methods=[“GET”, “POST”])

def Refresh():

message = None

                              startDate =

request.form[“mydata”].encode(‘utf8’)

                              vioAll =

refreshViolinPlot(startDate)

                              tabsAll = buildTabs(tabvioAll,

tabBarAll)

                              vioAllScript, vioAlldiv =

components(vioAll, tabsAll, INLINE)

                              result =

(encode_utf8(vioAllScript))

resp = make_response(result)

html = flask.render_template(

‘embed.html’,

vioAll_script=vioAllScript,

vioAll_div=vioAlldiv,

js_resources=js_resources,

css_resources=css_resources

)

return resp

return encode_utf8(html)

``

                      I am trying to update only one bokeh chart

with this POST method but I feel as if this
attempt is wrong somewhere…

–

            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/c87ef13b-f6e8-4b23-9b9e-25dac00eab25%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/c87ef13b-f6e8-4b23-9b9e-25dac00eab25%40continuum.io?utm_medium=email&utm_source=footer).

            For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

              [ ![Continuum
                  Analytics](https://lh6.googleusercontent.com/proxy/VYgVjggTk1hCXSN9wFkffE3I6kxTvJ51tT4KvDXOuKbs1WyFG66k7kt2-vkDimbyxfWtP-d1paJmstMYhPPnDYSUF4rLPoYM2GM2QFM=w5000-h5000) ](http://continuum.io)

–

  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/1714b72d-c6c0-49f7-b34d-dfc20b647aef%40continuum.io](https://groups.google.com/a/continuum.io/d/msgid/bokeh/1714b72d-c6c0-49f7-b34d-dfc20b647aef%40continuum.io?utm_medium=email&utm_source=footer).

  For more options, visit [https://groups.google.com/a/continuum.io/d/optout](https://groups.google.com/a/continuum.io/d/optout).

–
Sarah Bird
Developer, Bokeh

    [
      ![Continuum Analytics](http://docs.continuum.io/_static/img/ContinuumWordmark.png)
    ](http://continuum.io)