how to use bokeh add_periodic_callback function in Django

Question

I am trying to implement bokeh live chart in django. I got some reference in one website. They used add_periodic_callbackfunction in curdoc() to refresh the chart. This is working fine by running bokeh serve filename.py. I tried this in django by using this code in my view.py

def bokeh(request):
    import numpy as np
    from bokeh.layouts import column
    from bokeh.models import Button
    from bokeh.palettes import RdYlBu3
    from bokeh.plotting import figure, curdoc
    import pandas as pd        

    # create a plot and style its properties
    p = figure(x_axis_type="datetime", title="EUR USD", plot_width=1000)
    p.grid.grid_line_alpha = 0
    p.xaxis.axis_label = 'Date'
    p.yaxis.axis_label = 'Price'
    p.ygrid.band_fill_color = "olive"
    p.ygrid.band_fill_alpha = 0.1



    # add a text renderer to out plot (no data yet)
    r = p.line(x = [], y = [], legend='close', color='navy')

    i = 0

    ds = r.data_source

    # create a callback that will add a number in a random location
    def callback():
        global i
        a = fxdata()[0] ## this script will return EURUSD forex data as list

        ds.data['x'].append(np.datetime64(str(a[1]))) 
        ds.data['y'].append(np.float(a[2]))    

        ds.trigger('data', ds.data, ds.data)
        i = i + 1

    # add a button widget and configure with the call back
    button = Button(label="Press Me")
    # button.on_click(callback)

    # put the button and plot in a layout and add to the document
    curdoc().add_root(column(button, p))
    curdoc().add_periodic_callback(callback, 1000)
    script, div = components(curdoc())

    return render_to_response( 'bokeh/index.html', {'script' : script , 'div' : div} )

when I try this code i'm getting empty bokeh chart frame as output. can we do this by using add_periodic_callbackfunction in Django? or any other similar way to refresh the chart.

can anyone please help me. if you feel its not understandable please comment here. your help will be appreciated . Thanks in advance.

Please check if you find this helpful https://stackoverflow.com/questions/36828483/right-way-to-plot-live-data-with-django-and-bokeh — AKS, Feb 19 '18 at 06:08
i feel some complexity in that example he is running bokeh server and giving connection to Django port. In my case its a big app and Bokeh chart in one part. — Sarath_Mj, Feb 19 '18 at 07:06

score 1 · Answer 1 · edited Nov 23 '19 at 17:50

1

I think you can use embedded server document:

from bokeh.embed import server_document
script = server_document("https://demo.bokeh.org/slider")

This outputs a <script></script> of the bokeh server page that you can embed in your document.

source: https://docs.bokeh.org/en/latest/docs/user_guide/embed.html#app-documents

edited Nov 23 '19 at 17:50

bigreddot

33,642
5
69
122

answered Jul 12 '18 at 03:08

Stefanio

61
5

score 0 · Answer 2 · edited Nov 23 '19 at 01:24

Instead of using curdoc() go with components() function which resides in bokeh.embed and then make it live using ajax.

`def bokeh(request):


      window_size = 100
        window = np.ones(window_size) / float(window_size)
        #data_avg = np.convolve(data, window, 'same')
        TOOLS = "resize,pan,wheel_zoom,box_zoom,reset,save"
        p2 = figure(x_axis_type="datetime", title="abc", plot_width=1000)
        p2.grid.grid_line_alpha = 0
        p2.xaxis.axis_label = 'Date'
        p2.yaxis.axis_label = 'Price'
        p2.ygrid.band_fill_color = "olive"
        p2.ygrid.band_fill_alpha = 0.1

        p2.line(data_dates, data,  legend='close', color='navy')
        # p2.line(data_dates, data2, legend='SMA-15', color='green')


        #p2.line(data_dates, data_avg, legend='avg', color='navy')
        p2.legend.location = "top_left"
        script, div = components(p2)

        return render_to_response( 'bindex.html', {'script' : script , 'div' : div} )`

Ajax:

 <script>

                function refresh_bokeh() {
    $.ajax({
        url: '{% url 'bokeh' %}',
        success: function(data) {
            $('#bo').html(data);
        }
    });

}



setTimeout(function(){
    refresh_bokeh();

}, 2000);



</script>

Html:

{% load staticfiles %}
<! DOCTYPE html>
<html lang="en">
  <head>

        <script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.14.min.js"></script>
        <script src="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.14.min.js"></script>
        <link href="http://cdn.bokeh.org/bokeh/release/bokeh-0.12.14.min.css" rel="stylesheet" type="text/css">
        <link href="http://cdn.bokeh.org/bokeh/release/bokeh-widgets-0.12.14.min.css" rel="stylesheet" type="text/css">

    {{ script | safe }}

 </head>
 <body>
<div id = "bo">

        {{ div | safe }}

{% csrf_token %}
</div>
</body>


</html>

Thanks dude!!!!, But can you tell how to use **curdoc or add_periodic_callback()** This is what i'm mainly focusing. Anyway thanks for answering.. — Sarath_Mj, Feb 23 '18 at 09:38

how to use bokeh add_periodic_callback function in Django

2 Answers2