CODEWITHSUNDEEP
pythondjangodatatablebokeh
austintpg
austintpg

Reputation: 23

Embedded Bokeh DataTable not showing in Django

I have developed a Django web application showing interactive maps generated by Bokeh, and sent to the templates as script/div using 'components' (from bokeh.embed). All items (figure, slider, title) are shown correctly except DataTable, which I can show in a standalone document or in Jupyter, but not with 'components'.

I have read Bokeh DataTable not show in Flask, Embedding bokeh plot and datatable in flask and other threads, which helped me to fix the JS/CSS links, but it did not help with my problem.

I tried to wrap the DataTable inside different modules, like Panel, WidgetBox, etc., after reading https://github.com/bokeh/bokeh/issues/4507, without success. For simplicity, I used example data with no link to my data to generate the table in a separate Django view, and created a separate template.

I have run out of ideas for now. I know that widgets in Bokeh have had rendering issues, so I am guessing my issue could be related to those issues, but more likely to my lack of knowledge. The code is below.

DJANGO VIEW: 

def datatable_test(request):

data = dict(
    dates=[date(2014, 3, i + 1) for i in range(10)],
    downloads=[randint(0, 100) for i in range(10)],
)
source = ColumnDataSource(data)

columns = [
    TableColumn(field="dates", title="Date", formatter=DateFormatter()),
    TableColumn(field="downloads", title="Downloads"),
]

data_table_mth = DataTable(source=source, columns=columns, width=400, height=280)

layout = column(
    Spacer(width=100),
    WidgetBox(data_table_mth),
    )

script_table, div_table = components(layout)
output_file("DATATABLE TEST.html")
show(layout)

return render(request, 'integrated/datatable_test.html', {'script_table': script_table,'div_table': div_table})

DJANGO TEMPLATE:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>{% block title %}{% endblock %}</title>

  <link href="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.css" rel="stylesheet" type="text/css">
  <link href="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.4.0.min.css" rel="stylesheet" type="text/css">


  <script src="https://cdn.bokeh.org/bokeh/release/bokeh-1.4.0.min.js"></script>
  <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-1.4.0.min.js"></script>
  <script src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-1.4.0.min.js"></script>

  {{ script_table | safe }}

</head>

<body>
    <section class="content">
    <div class="row">
        <div class="col-md-12">
          <div class="box box-success">
            <div class="box-body">
                {{ div_table | safe }}
            </div>
          </div>
        </div>
      </div>
    </section>
</body>

Output as embedded table is blank: output as embedded table

Output as standalone html works: output as standalone

Upvotes: 0

Views: 643

Answers (1)

austintpg
austintpg

Reputation: 23

As bigreddot suggested, I opened the browser console, showing the following error messages when the DataTable is embedded in its original view/template:

browser console

Upvotes: 1

Related Questions