web-dev-qa-db-fra.com

comment intégrer des graphes de bokeh autonomes dans des modèles Django

Je veux afficher les graphiques offerts par la bibliothèque bokeh dans mon application web via Django framework mais je ne veux pas utiliser l'exécutable du serveur bokeh parce que ce n'est pas la bonne façon. ? si oui comment faire?

djangopython-2.7django-templatesbokeh
31
Ghada Ben Tekfa

En utilisant l'exemple de documentation Embedding Bokeh Plots comme suggéré par Fabio Pliger, on peut le faire dans Django:

dans le views.py fichier, on met:

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})

dans le urls.py fichier que nous pouvons mettre:

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

dans le fichier modèle simple_chart.html nous aurons :

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

    {{ the_div|safe }}

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

Et il fonctionne.

52
iMitwe

Vous n'avez pas besoin d'utiliser bokeh-server pour incorporer des tracés bokeh. Cela signifie simplement que vous n'utiliserez pas (et n'a probablement pas besoin) les fonctionnalités supplémentaires qu'il fournit.

En fait, vous pouvez incorporer des tracés bokeh de plusieurs façons, comme la génération de code HTML autonome, en générant des composants autonomes bokeh que vous pouvez ensuite intégrer dans votre application Django lors du rendu des modèles ou avec la méthode que nous appelons "chargement automatique" ce qui fait que bokeh retourne une balise qui se remplacera par un tracé Bokeh. Vous trouverez de meilleurs détails en regardant documentation .

Une autre bonne source d'inspiration est le exemples intégrés que vous pouvez trouver dans le référentiel.

5
Fabio Pliger

Il doit mettre {{the_script | safe}} à l'intérieur de la balise head

2
Xavi Moreno

Il est également possible de le faire fonctionner avec les demandes AJAX. Disons que nous avons une page chargée et que nous aimerions afficher un tracé en cliquant sur le bouton sans recharger la page entière. De Django vue nous retournons le script Bokeh et 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})

Lorsque nous obtenons AJAX dans JS (dans cet exemple, Jquery est utilisé), le div est d'abord ajouté à la page existante, puis le script est ajouté:

$("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);
  }});
});
2
Andrey Grachev

Voici une application de flacon qui utilise jquery pour interagir avec un tracé de bokeh. Consultez le templates/ Pour le javascript que vous pouvez réutiliser. Recherchez également des démos bokeh sur github.

1
hobs