Bonjour à tous,

J'essaye d'afficher un graphique matplotlib sur une page html. Pour ce faire, j'utilise mpld3 et je convertis mon graphique en html comme ça :

html_graph = mpld3.fig_to_html(fig)

Je reçois bien le contenu du graphique en html dans un fichier js mais la méthode que j'ai mise en place ne fonctionne pas pour afficher le graphique sur la page html. 

J'ai tenté de créer une div contenant un span, et j'essaie de remplacer le span par un nouveau span contenant le code html du graphique (celui-ci est composé d'un script). Cependant, je ne sais pas si ça pourrait fonctionner.

<div><span id="graphique">La réponse s'affichera ici</span></div>

 function addElement (result) {
        var newSpan = document.createElement('span');
        newSpan.id = "graphique";
        var newContent = document.createTextNode(result);
        console.log(newContent)
        newSpan.appendChild(newContent);
        var oldContent = document.getElementById("graphique");
        console.log(oldContent)
        if(oldContent != null){
            var parentDiv = oldContent.parentNode; 
            parentDiv.replaceChild(newContent, oldContent);
    }

Est-ce que quelqu'un aurait la solution et pourrait m'aider ?

Merci de votre aide,

Bhral

la chaine retournée contient des \n qui sont mal interprétés; si, à la main, tu colles le résultat d'un print(html_graph) dans un fichier html, la figure sera alors visible.

Tu peux l'enregistrer directement dans un fichier html

with open('graphe.html','w') as g:
    g.write(html_graph)

et si tu ouvres le fichier alors tu verras le graphe.

si tu utilises django ou autre, tu peux le passer en paramètre dans un render (bref, il faut afficher le résultat)

Je n'utilise pas django et mon but est d'insérer l'image sur une page web. Je me suis rendu compte que mon problème provient de mon JavaScript et non de mon code python. 

J'envoie bien le bon code html du graphique grâce à python mais je ne sais pas comment faire pour "l'insérer" dans mon code html après l'avoir reçu par une requête ajax.

Merci de votre aide,

Bhral

il y a juste à l'insérer dans le code (si tu as les \n dans ta chaine, alors ce n'est pas bon)

alternativement, tu peux passer par le json, et utiliser les script de mpld3

https://codehunter.cc/a/flask/display-multiple-mpld3-exports-on-a-single-html-page 

import json
# ... create matplotlib figure
json01 = json.dumps(mpld3.fig_to_dict(fig))

<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<script type="text/javascript" src="http://mpld3.github.io/js/mpld3.v0.1.js"></script>
<style></style>
<div id="fig01"></div><div id="fig02"></div><div id="fig03"></div>
<script type="text/javascript">
  var json01 = { <snip JSON code> };
  var json02 = { <snip JSON code> };
  var json03 = { <snip JSON code> };
  mpld3.draw_figure("fig01", json01);
  mpld3.draw_figure("fig02", json02);
  mpld3.draw_figure("fig03", json03);
</script>

Merci beaucoup ! En effet, c'était bien la solution de mon problème (beaucoup plus simple que ce que j'ai testé )  . 

Bonjour,

Sujet résolu