CODEWITHSUNDEEP
bokeh
Mikal025
Mikal025

Reputation: 1

Bokeh DataTable not loading

I'm trying to include Bokeh tabular charts on my web app through sending to the templates as script/div using 'components', however the table is not loading (not even showing when I do show()). I have read and tried solutions in several threads here including Embedded Bokeh DataTable not showing in Django but none worked. My code is below:

Django View

def Product(request):
    
    selected_prod = request.GET.get('select-product', None)
         
    Product_ID = Products.objects.filter(Product_Name=selected_prod).values('Product_ID')

    for product in Product_ID:
        product = product['Product_ID']
    
    product_data = Ratings.objects.filter(Product_id=product).values('Rating_Type', 'Rating_Year', 'Rating').order_by('Rating_Year')
    
    data = {
        "Rating Type": list(rating_data.values_list('Rating_Type', flat=True)),
        "Year":list(rating_data.values_list('Rating_Year', flat=True)),
        "Rating": list(rating_data.values_list('Rating', flat=True)),
    }
          
    source = ColumnDataSource(data)
    columns = [TableColumn(field=col, title=col) for col in data.keys()]
   
    product_rating = DataTable(source = source, columns=columns, width=600, height=300) 
    
    rating_script, rating_div = components(product_rating)
    
    context={
        'products':products,
        'rating_script':rating_script,
        'rating_div':rating_div,
    }
        
    if request.htmx:
        return render(request, 'partials/product_views.html', context)
    
    return render(request, 'product.html', context)

Django Templates

{% extends 'base.html' %}

<!DOCTYPE html>

<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <body>

        {% block title %}
            <h1 style="text-align:center; font-size:15px; font-family: Montserrat;">Product Overview</h1>
        {% endblock %}

        {% block content %}

            <h1></h1>
            <div id="select-container">
                <form>
                    <select name="select-product" id="prod-select"
                        class="custom-select" autocomplete="off"
                        hx-get="{% url 'update_charts' %}"
                        hx-target="#prod-chart-container">
                            {% for product in products %}
                                <option value="{{ product }}">{{ product }}</option>
                            {% endfor %}
                    </select>
                </form>    
            
                <h2></h2>

                <div id="prod-chart-container">
                    {% include 'partials/product_views.html' %}
                </div>
            </div>

        {% endblock %}

    </body>

</html>

Partial

<table>
    <tr>
        <td>
            <div id="prod-rating-chart">
                {{ rating_div|safe }}  
            </div>
        </td>
    </tr>
</table>

{{ rating_script|safe }}

When I opened the browser console, I noticed the following error messages.

Uncaught (in promise) y: could not resolve type 'DataTable', which could be bokeh-3.6.3.min.js:213 due to a widget or a custom model not being registered before first usage

Can someone please provide guidance on how to resolve this?

Upvotes: 0

Views: 23

Answers (1)

bigreddot
bigreddot

Reputation: 34618

Widgets and tables are optional parts of Bokeh that live in separate JS bundles. When using the components API you will need to load those resources in your template explicitly, as described in the documentation:

<script src="https://cdn.bokeh.org/bokeh/release/bokeh-x.y.z.min.js"
        crossorigin="anonymous"></script>
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-x.y.z.min.js"
        crossorigin="anonymous"></script>

Upvotes: 0

Related Questions