CODEWITHSUNDEEP
djangotemplatesplotbokeh
Ivan Pouradier Duteil
Ivan Pouradier Duteil

Reputation: 41

Mutiple bokeh Charts in django template

I don't understand how I can set up several Bokeh Chart in my django template. I have read this page https://docs.bokeh.org/en/latest/docs/user_guide/embed.html which supposed to explain this but it is not clear at all.

Here is my view :

def Bokehplot(request):
        source = ColumnDataSource(S.df)
        p = figure(x_axis_type = "datetime", title = "un truc", x_axis_label = "date" , y_axis_label = "autre truc")
        p.line("date", "Te", source = source, line_width = 2,color = "green", alpha = 0.6)

        q = figure(x_axis_type = "datetime", title = "un truc", x_axis_label = "date" , y_axis_label = "autre truc")
        q.line("date", "Tr", source = source, line_width = 2,color = "red", alpha = 0.6)


        plots = {'Red': p, 'Blue': q}

        script, div = components(plots)

        return render(request, 'batterie/results.html', locals())

{{div|safe}} gives the 2 divs on a row. I would like to access div1 (first graph) and div2 (second graph) in order to put them in 2 different bootstrap columns ? Any help is welcome. Thanks!

Upvotes: 0

Views: 177

Answers (1)

Ivan Pouradier Duteil
Ivan Pouradier Duteil

Reputation: 41

Got my answer, very simple. My View : 

def Bokehplot(request):
        source = ColumnDataSource(S.df)
        p = figure(x_axis_type = "datetime", title = "un truc", x_axis_label = "date" , y_axis_label = "autre truc")
        p.line("date", "Te", source = source, line_width = 2,color = "green", alpha = 0.6)

        q = figure(x_axis_type = "datetime", title = "un truc", x_axis_label = "date" , y_axis_label = "autre truc")
        q.line("date", "Tr", source = source, line_width = 2,color = "red", alpha = 0.6)


        plots = {'Red': p, 'Blue': q}

        script, div = components(plots)
        div1 = div["Red"]
        div2 = div["Blue"]

        return render(request, 'batterie/results.html', locals())

My template :

<div class = "row">
  <div class = "col-sm-6 p-3 text-center">

    {{ div1 | safe }}

  </div>

  <div class = "col-sm-6 p-3 text-center">
    {{ div2 | safe }}

  </div>
</div>

Now, I can arrange my plots with Bootstrap. Cool !

Upvotes: 2

Related Questions