Discussion :

[Bhrallou]

Bonjour, j'essaie d'afficher un graphique sur une page html. Je reçois correctement le code html du graphique (sous forme de <script>) que je transmets à la fonction ci-dessous.

J'ai essayé de créer une div qui contient un span sur ma page web et de remplacer ce span par un nouveau qui contient le code html de mon graphique. Cependant, j'ai remarqué qu'après var newContent = document.createTextNode(result);, ma variable newContent comporte le code html "comme une seule ligne" ce qui pose problème car le premier commentaire efface le reste du code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
    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 une solution ?

Merci de votre aide.

[mathieu]

d'où vient le code html ? d'un appel ajax ?

[Bhrallou]

Merci de votre réponse. En effet, je reçois le code grâce à la requête ajax ci-dessous et le code html correspond à un graphique matplotlib.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 $("#calculer").click(function(){
        $.ajax({
            type: 'POST',
            url: '/calculer',
            data : myEditor.getLatex(), 
            success: function(result) {
                console.log(result)
                addElement(result);
            }, 
            error: function() {
                $("#resultat").text("Erreur lors de la convertion!");
                $('#resultat').show();
            }
        })

Le console.log(result) m'affiche le code html (qui est composé d'un <script>) avec les sauts de lignes mais une fois que je fais var newContent = document.createTextNode(result);, je récupère tout le code comme une seule ligne. Le problème est donc que quand je copie colle ma réponse dans un nouveau fichier html, le premier commentaire supprime tout le code derrière (vu que les sauts de lignes ont disparu).

Je ne sais donc pas comment conserver les sauts de lignes et si ma façon d'essayer d'intégrer le code html est correcte.

Merci de votre aide

[mathieu]

d'habitude dans les appels ajax ont fait seulement passer des données et non du code. et vous parlez de matplotlib et si j'ai bien compris, cette bibliothèque génère des images, c'est bien ça ?
pour vous nous montrer un exemple de ce que vous récupérez avec l'appel ajax ?

[Bhrallou]

En effet, matplotlib génère un graphique et j'utilise une autre librairie pour le convertir en code html. Voici le code que je reçois dans "result" pour la fonction x^2.

Y aurait-il une meilleure façon de faire pour récupérer le code ? Est-ce envisageable avec ma requête ajax ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<style>
 
</style>
 
<div id="fig_el1604015491960007048040502134"></div>
<script>
function mpld3_load_lib(url, callback){
  var s = document.createElement('script');
  s.src = url;
  s.async = true;
  s.onreadystatechange = s.onload = callback;
  s.onerror = function(){console.warn("failed to load library " + url);};
  document.getElementsByTagName("head")[0].appendChild(s);
}
 
if(typeof(mpld3) !== "undefined" && mpld3._mpld3IsLoaded){
   // already loaded: just create the figure
   !function(mpld3){
       
       mpld3.draw_figure("fig_el1604015491960007048040502134", {"width": 640.0, "height": 480.0, "axes": [{"bbox": [0.125, 0.10999999999999999, 0.775, 0.77], "xlim": [-50.0, 1050.0], "ylim": [-50000.0, 1050000.0], "xdomain": [-50.0, 1050.0], "ydomain": [-50000.0, 1050000.0], "xscale": "linear", "yscale": "linear", "axes": [{"position": "bottom", "nticks": 8, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}, {"position": "left", "nticks": 8, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], "axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": "el160401549196000608", "lines": [{"data": "data01", "xindex": 0, "yindex": 1, "coordinates": "data", "id": "el160401549196300448", "color": "#1F77B4", "linewidth": 1.5, "dasharray": "none", "alpha": 1, "zorder": 2, "drawstyle": "default"}], "paths": [], "markers": [], "texts": [], "collections": [], "images": [], "sharex": [], "sharey": []}], "data": {"data01": [[0.0, 0.0], [34.48275862068966, 1189.060642092747], [68.96551724137932, 4756.242568370988], [103.44827586206898, 10701.545778834725], [137.93103448275863, 19024.970273483952], [172.41379310344828, 29726.51605231867], [206.89655172413796, 42806.1831153389], [241.37931034482762, 58263.97146254461], [275.86206896551727, 76099.88109393581], [310.3448275862069, 96313.9120095125], [344.82758620689657, 118906.06420927469], [379.3103448275862, 143876.33769322236], [413.79310344827593, 171224.7324613556], [448.2758620689656, 200951.24851367425], [482.75862068965523, 233055.88585017843], [517.2413793103449, 267538.64447086805], [551.7241379310345, 304399.52437574323], [586.2068965517242, 343638.52556480386], [620.6896551724138, 385255.64803805], [655.1724137931035, 429250.8917954816], [689.6551724137931, 475624.25683709874], [724.1379310344828, 524375.7431629014], [758.6206896551724, 575505.3507728894], [793.1034482758621, 629013.0796670631], [827.5862068965519, 684898.9298454224], [862.0689655172415, 743162.9013079669], [896.5517241379312, 803804.994054697], [931.0344827586208, 866825.2080856126], [965.5172413793105, 932223.5434007137], [1000.0, 1000000.0]]}, "id": "el160401549196000704", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
   }(mpld3);
}else if(typeof define === "function" && define.amd){
   // require.js is available: use it to load d3/mpld3
   require.config({paths: {d3: "https://d3js.org/d3.v5"}});
   require(["d3"], function(d3){
      window.d3 = d3;
      mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.5.8.js", function(){
         
         mpld3.draw_figure("fig_el1604015491960007048040502134", {"width": 640.0, "height": 480.0, "axes": [{"bbox": [0.125, 0.10999999999999999, 0.775, 0.77], "xlim": [-50.0, 1050.0], "ylim": [-50000.0, 1050000.0], "xdomain": [-50.0, 1050.0], "ydomain": [-50000.0, 1050000.0], "xscale": "linear", "yscale": "linear", "axes": [{"position": "bottom", "nticks": 8, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}, {"position": "left", "nticks": 8, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], "axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": "el160401549196000608", "lines": [{"data": "data01", "xindex": 0, "yindex": 1, "coordinates": "data", "id": "el160401549196300448", "color": "#1F77B4", "linewidth": 1.5, "dasharray": "none", "alpha": 1, "zorder": 2, "drawstyle": "default"}], "paths": [], "markers": [], "texts": [], "collections": [], "images": [], "sharex": [], "sharey": []}], "data": {"data01": [[0.0, 0.0], [34.48275862068966, 1189.060642092747], [68.96551724137932, 4756.242568370988], [103.44827586206898, 10701.545778834725], [137.93103448275863, 19024.970273483952], [172.41379310344828, 29726.51605231867], [206.89655172413796, 42806.1831153389], [241.37931034482762, 58263.97146254461], [275.86206896551727, 76099.88109393581], [310.3448275862069, 96313.9120095125], [344.82758620689657, 118906.06420927469], [379.3103448275862, 143876.33769322236], [413.79310344827593, 171224.7324613556], [448.2758620689656, 200951.24851367425], [482.75862068965523, 233055.88585017843], [517.2413793103449, 267538.64447086805], [551.7241379310345, 304399.52437574323], [586.2068965517242, 343638.52556480386], [620.6896551724138, 385255.64803805], [655.1724137931035, 429250.8917954816], [689.6551724137931, 475624.25683709874], [724.1379310344828, 524375.7431629014], [758.6206896551724, 575505.3507728894], [793.1034482758621, 629013.0796670631], [827.5862068965519, 684898.9298454224], [862.0689655172415, 743162.9013079669], [896.5517241379312, 803804.994054697], [931.0344827586208, 866825.2080856126], [965.5172413793105, 932223.5434007137], [1000.0, 1000000.0]]}, "id": "el160401549196000704", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
      });
    });
}else{
    // require.js not available: dynamically load d3 & mpld3
    mpld3_load_lib("https://d3js.org/d3.v5.js", function(){
         mpld3_load_lib("https://mpld3.github.io/js/mpld3.v0.5.8.js", function(){
                 
                 mpld3.draw_figure("fig_el1604015491960007048040502134", {"width": 640.0, "height": 480.0, "axes": [{"bbox": [0.125, 0.10999999999999999, 0.775, 0.77], "xlim": [-50.0, 1050.0], "ylim": [-50000.0, 1050000.0], "xdomain": [-50.0, 1050.0], "ydomain": [-50000.0, 1050000.0], "xscale": "linear", "yscale": "linear", "axes": [{"position": "bottom", "nticks": 8, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}, {"position": "left", "nticks": 8, "tickvalues": null, "tickformat_formatter": "", "tickformat": null, "scale": "linear", "fontsize": 10.0, "grid": {"gridOn": false}, "visible": true}], "axesbg": "#FFFFFF", "axesbgalpha": null, "zoomable": true, "id": "el160401549196000608", "lines": [{"data": "data01", "xindex": 0, "yindex": 1, "coordinates": "data", "id": "el160401549196300448", "color": "#1F77B4", "linewidth": 1.5, "dasharray": "none", "alpha": 1, "zorder": 2, "drawstyle": "default"}], "paths": [], "markers": [], "texts": [], "collections": [], "images": [], "sharex": [], "sharey": []}], "data": {"data01": [[0.0, 0.0], [34.48275862068966, 1189.060642092747], [68.96551724137932, 4756.242568370988], [103.44827586206898, 10701.545778834725], [137.93103448275863, 19024.970273483952], [172.41379310344828, 29726.51605231867], [206.89655172413796, 42806.1831153389], [241.37931034482762, 58263.97146254461], [275.86206896551727, 76099.88109393581], [310.3448275862069, 96313.9120095125], [344.82758620689657, 118906.06420927469], [379.3103448275862, 143876.33769322236], [413.79310344827593, 171224.7324613556], [448.2758620689656, 200951.24851367425], [482.75862068965523, 233055.88585017843], [517.2413793103449, 267538.64447086805], [551.7241379310345, 304399.52437574323], [586.2068965517242, 343638.52556480386], [620.6896551724138, 385255.64803805], [655.1724137931035, 429250.8917954816], [689.6551724137931, 475624.25683709874], [724.1379310344828, 524375.7431629014], [758.6206896551724, 575505.3507728894], [793.1034482758621, 629013.0796670631], [827.5862068965519, 684898.9298454224], [862.0689655172415, 743162.9013079669], [896.5517241379312, 803804.994054697], [931.0344827586208, 866825.2080856126], [965.5172413793105, 932223.5434007137], [1000.0, 1000000.0]]}, "id": "el160401549196000704", "plugins": [{"type": "reset"}, {"type": "zoom", "button": true, "enabled": false}, {"type": "boxzoom", "button": true, "enabled": false}]});
            })
         });
}
</script>

Merci de votre aide.

[mathieu]

vous ne m'avez pas répondu au sujet de matplotlib, que produit cette bibliothèque ? ça n'a pas l'air d'être une image puisque vous avez des données en résultat.

j'ai l'impression qu'il y a plusieurs étapes qu'il est peut-être possible de réduire. avez vous essayé d'utiliser des bibliothèques javascript comme celle ci par exemple ?
https://www.chartjs.org/
https://d3js.org/

[Bhrallou]

Matplotlib est une libraire qui permet de créer des visualisations graphiques en python. L'objet de mon programme est de demander une formule mathématique sur une page web (en html), de transmettre l'information à un serveur python par l'intermédiaire d'une requête AJAX et de récupérer la réponse + d'afficher un graphique de la fonction sur ma page web.

J'utilise justement une bibliothèque python (mpld3) qui se base sur matplotlib et d3js pour convertir le graphique matplotlib en code html. C'est ce code html que je vous ai transmis précédemment. Je n'ai pas essayé d'utiliser directement des bibliothèques javascript car j'aimerais utiliser matplotlib et faire toute la gestion "de la résolution de l'équation" (résolution + affichage graphique) en python.

Mais je suis preneur pour tout conseil si c'est impossible d'insérer le script de l'image dans mon html

[Beginner.]

Salut,

Il me semble que matplotlib permet de sauvegarder le graphique sous la forme d'une image, ton serveur pourrait renvoyer cette image, non ? Ensuite insérer une image dans une page html n'est pas difficile...