Ins�rer du code html gr�ce � JS

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:

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.

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

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:

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 :?

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 ?

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:

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.

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/

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 :?

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...