Améliorer mon Graphe qui reprend 3 crédits en les superposant.

Bonjour a tous,

J'essaie en vain de mettre au point un script qui me permette de superposer 3 crédits sur un seul graph et j'y suis presque, sauf que je galère depuis 3 jours pour le finaliser, et je n'ai plus les yeux en face des trous a force de modifications.

Voici mon code :

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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

<canvas width="400" height="300" style="max-width:80%" id="canvasLissage"></canvas> <script> function CalculM1(idA) {   Tptz=0.000000000000000000000000000000001; //Taux du taux 0 Mptz=92000; // Montant du Pret a taux 0 Nptz_diff=5; // le pret a taux 0 commence dans 5ans Nptz_amort=20; // le pret a taux 0 duree 20ans Mptz=500; // Mensualité du pret a taux 0   El=200000; // Montant du Pret 1 Tl=2; // Taux du Pret 1 Nl=25; // Durée du Pret 1 //=> Ml = 848   Ec=25000;// Montant du Pret 2 Tc=6; // Taux du Pret 2 Nc=10; // Durée du Pret 2 //=> Mc = 278   // Calcul de la mensualité du Pret 1 M1 = El*(Tl/100)/(1-Math.pow((1+Tl/100/12),(-(Nl*12))))/12; M1=Math.floor(M1*100)/100;   // Calcul de la mensualité du Pret 2 Mc=Ec*(Tc/100)/(1-Math.pow((1+Tc/100/12),(-(Nc*12))))/12; Mc=Math.round(Mc*100)/100;   GraphLissage(Mc,Nc,M1,Nl,Mptz,Nptz_diff,Nptz_amort,idA); }   function GraphLissage(Mc,Nc,M1,Nl,Mptz,Nptz_diff,Nptz_amort,idA) { M2=M1+Mc+Mptz;   Width=document.getElementById("canvasLissage").width; Height=document.getElementById("canvasLissage").height; cnvlss = document.getElementById("canvasLissage"); ctxlss = cnvlss.getContext("2d"); ctxlss.fillStyle="white"; ctxlss.fillRect(0,0,Width,Height);   ctxlss.fillStyle="black"; ctxlss.beginPath(); ctxlss.moveTo(10,Height-20);ctxlss.lineTo(Width-4,Height-20); ctxlss.stroke(); ctxlss.beginPath();ctxlss.moveTo(Width-12,Height-25); ctxlss.lineTo(Width-4,Height-20);ctxlss.lineTo(Width-12,Height-15); ctxlss.stroke(); ctxlss.beginPath(); ctxlss.moveTo(20,Height-10);ctxlss.lineTo(20,10); ctxlss.stroke(); ctxlss.beginPath();ctxlss.moveTo(15,18); ctxlss.lineTo(20,10);ctxlss.lineTo(25,18); ctxlss.stroke();   Mx=Width-40; ctxlss.fillStyle="blue"; ctxlss.fillRect(20,40,Mx*Nc/Nl,M1/M2*(Height-60)); ctxlss.fillRect(20+Mx*Nc/Nl , 40 ,Width-(20+Mx*Nc/Nl)-20 ,(Height-60));   ctxlss.fillStyle="green"; ctxlss.fillRect(20,40+M1/M2*(Height-60),Mx*Nptz_amort/Nl,Mptz/M2*(Height-60));   ctxlss.fillStyle="magenta"; ctxlss.fillRect(20,40+M1/M2*(Height-60),Mx*Nc/Nl,Mc/M2*(Height-60));   ctxlss.font="8pt Calibri,Geneva,Arial"; ctxlss.fillStyle="black"; ctxlss.fillText(Nptz_amort,Mx*Nptz_amort/Nl,Height-5); ctxlss.fillText(Nc,Mx*Nc/Nl,Height-5); ctxlss.fillText(Nl,Mx-5,Height-5); ctxlss.textAlign="left"; ctxlss.fillText(Math.round(Mc),0,40+M1/M2*(Height-60)); ctxlss.fillText(Math.round(Mptz),0,35+M1/M2*(Height-60)); ctxlss.fillText(Math.round(M1),0,30);   } CalculM1(idA); </script>

---

Voila ce que j'obtiens et voila ce que j'aimerai obtenir.

http://iobnet.com/testG.php

Merci à tous pour votre aide et excellent dimanche.
Olivier

Je n'ai pas complètement compris le rapport entre les valeurs de départ et le résultat que vous souhaitez obtenir.
Par exemple la variable Mptz=500, vous marquez "Mensualité du pret a taux 0" mais ensuite sur l'image souhaitez, la mensualité à l'air d'être de 278.
Et pour le prêt 2, la zone rose est plus petite de 5 à 10 ans ? Cela veut dire que les mensualités du prêt 2 sont plus petites de 5 à 10 ans ?

Bonjour et merci pour commencer de tenter de m'aider.

Oui vous avez raison, j'ai interverti les valeurs,


Je viens de remettre la bonne image.


Oui je souhaite que le PTZ demarre a 5 (date de début) .. ce n'est pas une date fixe evidemment et se termine 20ans plus tard soit a 25ans puisque j'ai mis une date d'entrée a 5 et de sortie a 20

Merci de votre aide
Olivier

Citation:

---

Envoyé par mathieu

Et pour le prêt 2, la zone rose est plus petite de 5 à 10 ans ? Cela veut dire que les mensualités du prêt 2 sont plus petites de 5 à 10 ans ?

---

La question tient toujours pour le prêt à taux 0 : entre 5 et 10 ans la mensualités est plus petit ou alors c'est juste le rectangle vert qui se trouve derrière la zone rose ?

la 1re étape est déjà de vérifier le contenu des variables intermédiaires, M1 et Mc. Est ce que ces valeurs sont correctes ?

pour la 2e étape je vous conseille de définir des variables qui serviront à dessiner, par exemple

Code:

---

1 2 3 4 5 6 7

var margeHaut = 40; var margeBas = 20; var margeGauche = 20; var margeDroite = 20;   var largeurInterieure = Width - margeGauche - margeDroite; var hauteurInterieure = Height - margeHaut - margeBas;

---

comme cela, au lieu d'indiquer "ctxlss.fillRect(20, 40, ..." vous marquerez "ctxlss.fillRect(margeGauche, margeHaut," ce qui vous aidera déjà mieux à voir ce que fait chaque ligne de code

Le pret a tx 0 est effectivement le carré vert.

Comme il commence a l'année 5, de 0 a 5 il est égal a 0euros et de 5 a (5+20) il est a 500.

J'ai commencé a réorganiser mes lignes de cette façon pour reprendre mes calculs mais je n'arrive pas ..grrrrr

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

ctxlss.fillStyle="blue"; xx=20; yy=40; larg=Mx*Nc/Nl; haut=M1/M2*(Height-60); ctxlss.fillRect(xx,yy,larg,haut);   xx=20+Mx*Nc/Nl; yy=40; larg=Width-(20+Mx*Nc/Nl)-20; haut=(Height-60); ctxlss.fillRect(xx,yy,larg,haut);   ctxlss.fillStyle="green"; xx=20; yy=40+M1/M2*(Height-10); larg=Mx*Nptz_amort/Nl; haut=Mptz/M2*(Height-10); ctxlss.fillRect(xx,yy,larg,haut);   ctxlss.fillStyle="magenta"; xx=20; yy=40+M1/M2*(Height+10); larg=Mx*Nc/Nl; haut=Mc/M2*(Height-60); ctxlss.fillRect(xx,yy,larg,haut);

---

Merci encore

il y a un soucis avec la valeur M2, vous additionnez les différentes mensualités mais ensuite je pense que cette valeur ne sert pas pour les dessins.

à partir des variables que j'ai indiqué dans l'autre message, les rectangles rose et vert se dessinent avec ce code :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

ctxlss.fillStyle = "green"; ctxlss.fillRect( margeGauche + (Nptz_diff / Nl) * largeurInterieure , margeHaut + hauteurInterieure - (Mptz / M1) * hauteurInterieure , (1 - Nptz_diff / Nl) * largeurInterieure , (Mptz / M1) * hauteurInterieure );   ctxlss.fillStyle = "magenta"; ctxlss.fillRect( margeGauche , margeHaut + hauteurInterieure - (Mc / M1) * hauteurInterieure , (Nc / Nl) * largeurInterieure , (Mc / M1) * hauteurInterieure );

---

Merci de votre aide, avec d'autres modifs j'y suis arrivé. Excellente soirée a vous.

En fait je viens de m'apercevoir que mon code n'est pas tout a fait terminer, car si l'on considère que la durée amort du PTZ n'est plus de 20ans mais de 10 par exemple, et bien le carré vert vient quand meme se coller sur 25ans ???

Pour rappel le Credit Immo s'arrete a 25ans
le crédit consommation s'arrete a 10ans
et le PTZ commence a 5 et s'arrete dans mon ancien exemple a 20ans donc (5 + 20) = 25, la c'est normal qu'il colle a la date de 25ans
Mais si l'on prend un nouvel exemple dont le PTZ commencerai toujours à 5 mais durerait que 10ans et non 20ans, on a (5 + durée amort 10)=15 ... et pourtant dans le graphe il comme quand meme a 25 ???


Merci pour votre aide et désolés de remettre a NON RESOLU mon probleme.