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/