Saltar al contenido

cómo incrustar gráficos de bokeh independientes en plantillas de django

Solución:

Usando el ejemplo de documentación de Embedding Bokeh Plots como lo sugiere Fabio Pliger, se puede hacer esto en Django:

en el views.py archivo, ponemos:

from django.shortcuts import render
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import components

def simple_chart(request):
    plot = figure()
    plot.circle([1,2], [3,4])

    script, div = components(plot, CDN)

    return render(request, "simple_chart.html", {"the_script": script, "the_div": div})

en el urls.py archivo podemos poner:

from myapp.views import simple_chart 
...
...
...
url(r'^simple_chart/$', simple_chart, name="simple_chart"),
...
...

en el archivo de plantilla simple_chart.html tendremos :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Experiment with Bokeh</title>
    <script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.js"></script>
    <link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.css">
</head>
<body>

    {{ the_div|safe }}

    {{ the_script|safe }}
</body>
</html> 

Y funciona.

No es necesario utilizar el servidor bokeh para incrustar gráficos de bokeh. Simplemente significa que no utilizará (y probablemente no necesitará) las funciones adicionales que proporciona.

De hecho, puede incrustar gráficos de bokeh de muchas maneras, como generar html independiente, generando componentes independientes de bokeh que luego puede incrustar en su aplicación django al renderizar plantillas o con el método que llamamos “carga automática” que hace que bokeh devuelva una etiqueta que reemplazará sí mismo con una trama de Bokeh. Encontrará mejores detalles en la documentación.

Otra buena fuente de inspiración son los ejemplos de incrustaciones que puede encontrar en el repositorio.

También es posible hacer que funcione con solicitudes AJAX. Digamos que tenemos una página cargada y nos gustaría mostrar un gráfico al hacer clic en el botón sin recargar toda la página. Desde la vista de Django, devolvemos el script Bokeh y div en JSON:

from django.http import JsonResponse
from bokeh.plotting import figure
from bokeh.resources import CDN
from bokeh.embed import components

def simple_chart(request):
  plot = figure()
  plot.circle([1,2], [3,4])

  script, div = components(plot, CDN)

  return JsonResponse({"script": script, "div": div})

Cuando obtenemos la respuesta AJAX en JS (en este ejemplo se usa Jquery), primero se agrega el div a la página existente y luego se agrega el script:

$("button").click(function(){
  $.ajax({
    url: "/simple_chart", 
    success: function(result){
      var bokeh_data = JSON.parse(result);
      $('#bokeh_graph').html(bokeh_data.div);
      $("head").append(bokeh_data.script);
  }});
});
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *