Forums

Holoviews overlay plot is not showing on my webpage

Hi, I have a holoviews map and I'm trying to display it on my website. When I run my program on my local host it works, but now that I deploy it on pythonanywhere I can't display it.

Below is the Output I'm trying to display (Scanner is the name of my dataframe):

   proyectos_gv_points = gv.Points(scanner, ['longitud', 'latitud'],
                               ['codigo_proyecto', 'status', 'incidencia_ufm2',
                               'precio_estimado', 'velocidad_de_ventas', 'unidades','color'], labels =      'codigo_proyecto')

tooltips = [('Proyecto', '@codigo_proyecto'),
        ('Status', '@status'),
        ('Incidencia UF/m2', '@incidencia_ufm2{0.0}'),
        ('Precio Estimado', '@precio_estimado{0.0}'),
        ('Velocidad de Ventas', '@velocidad_de_ventas{0.0}'),
        ('Unidades', '@unidades'),
        ]
hover = HoverTool(tooltips=tooltips)
proyectos_plot = (gvts.StamenToner * proyectos_gv_points).opts(
    opts.Points(width=800, height=500, alpha=0.7,
                hover_line_color='black',
                color = dim('color'),line_color='black', xaxis=None, yaxis=None,
                tools=[hover],size=30,
                hover_fill_color='#ff0000', hover_fill_alpha=0.7))*gv.Labels(proyectos_gv_points).options(text_font_size='7.5pt', text_color='white')

Then in my views.py file I use:

  return JsonResponse({'status':status,'scanner_data': return_data})

Where return_data is my map from above (proyectos_plot).

On my scanner_demo.html. template I added the script to bokeh:

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

I have tried everything and it doesn't work. The page keeps loading when I use the filters and never displays the map. Can someone help me?

deleted-user-8212859 | 2 posts | Jan. 17, 2021, 9:55 p.m. | permalink

What do you see in your logs? (There are links to logs on your "Web" page on PythonAnywhere) What do you see in your browser's dev tools?

Staff fjl | 4352 posts | PythonAnywhere staff | Jan. 18, 2021, 9:39 a.m. | permalink

Hi,

I don't have any errors on my logs, but when I use the browser dev tools I see this:

Failed to load resource: the server responded with a status of 502 (Bad Gateway)
scanner:1 Mixed Content: The page at 'https://francisco198.pythonanywhere.com/scanner' 
was loaded over HTTPS, but requested an insecure stylesheet

 'http://cdn.pydata.org/bokeh/release/bokeh-2.2.3.min.css'. This request has been blocked; 
 the content must be served over HTTPS.
 scanner:1 Mixed Content: The page at 'https://francisco198.pythonanywhere.com/scanner' 
 was loaded over HTTPS, but requested an insecure stylesheet

 'http://cdn.pydata.org/bokeh/release/bokeh-widgets-2.2.3.min.css'. This request has been 
 blocked; the content must be served over HTTPS.

 DevTools failed to load SourceMap: Could not load content for chrome- 
 extension://hgmhmanijnjhaffoampdlllchpolkdnj/js/lib/purify.min.js.map: HTTP error: status 
 code 404, net::ERR_UNKNOWN_URL_SCHEME

 jquery.min.js:2 POST http://francisco198.pythonanywhere.com/ajax/scanner_filter 502 (Bad 
 Gateway)

But the same code on my local machine is working. So I don't know why the map can't be displayed. Any ideas?

Thank you

deleted-user-8212859 | 2 posts | Jan. 18, 2021, 6:39 p.m. | permalink

Hi, there are lot of errors in your logs. You'll find them in "Log files" section on the Web page. It's a good practice to start debugging there.

Staff pafk | 2973 posts | PythonAnywhere staff | Jan. 19, 2021, 9:25 a.m. | permalink