kostenloser Webspace werbefrei: lima-city

Probleme zwischen TWIG und Javascript (Charts)

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   tolgaakdeniz

   tolgaakdeniz hat kostenlosen Webspace.

   1:51, 2.12.2020

   Abend zusammen,
   ich wollte gerne Charts in mein TWIG Template erstellen um die Finanzübersicht meines Projektes zu veranschaulichen. Leider hab ich das Problem das er den November im Dezember einträgt und den Dezember auf den November hochaddiert. Ich weiß aber irgendwie auch nicht wo ran es liegen könnte. Unten findet ihr den Vollständigen Codeabschnitt, über die PHP Parameter lass ich alle Transaktionen aus der Tabelle auslesen deswegen das foreach, es ist auch nicht gut gelöst ich weiß aber ich wäre erstmal froh wenn es gelöst wäre bin in Sachen Web Entwicklung noch nicht Top dabei.
   
   

   <div class="tab-pane" id="graph">
       {% set JanAmount = 0 %} {% set FebAmount = 0 %} {% set MarAmount = 0 %} {% set AprAmount = 0 %} {% set MaiAmount = 0 %} {% set JunAmount = 0 %} {% set JulAmount = 0 %}
       {% set AugAmount = 0 %} {% set SepAmount = 0 %} {% set OktAmount = 0 %} {% set NovAmount = 0 %} {% set DecAmount = 0 %}
   
       {% set nJanAmount = 0 %} {% set nFebAmount = 0 %} {% set nMarAmount = 0 %} {% set nAprAmount = 0 %} {% set nMaiAmount = 0 %} {% set nJunAmount = 0 %} {% set nJulAmount = 0 %}
       {% set nAugAmount = 0 %} {% set nSepAmount = 0 %} {% set nOktAmount = 0 %} {% set nNovAmount = 0 %} {% set nDecAmount = 0 %}
   
       {% set datum = current_user.cwmon %}
       {% set yeahrNow = datum|date('Y') %}
       {% set monthNow = datum|date('Y') %}
   
       {% for statement in statements %}
         {% set month = env.getFormattedDatetime(statements.date)|date('n') %}
         {% set yeahr = env.getFormattedDatetime(statements.date)|date('Y') %}
   
         {% if yeahr == yeahrNow and month == 1 %}
           {% if statement.amount > 0 %}
             {% set JanAmount = JanAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nJanAmount = nJanAmount - statement.amount %}
           {% endif  %}
   
         {% elseif yeahr == yeahrNow and month == 2 %}
           {% if statement.amount > 0 %}
             {% set FebAmount = FebAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nFebAmount = nFebAmount - statement.amount %}
           {% endif  %}
           </br>
           <a>{{ month }}</a> <a>{{ yeahr }}</a>
   
         {% elseif yeahr == yeahrNow and month == 3 %}
           {% if statement.amount > 0 %}
             {% set MarAmount = MarAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nMarAmount = nMarAmount - statement.amount %}
           {% endif  %}
   
         {% elseif yeahr == yeahrNow and month == 4 %}
           {% if statement.amount > 0 %}
             {% set AprAmount = AprAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nAprAmount = nAprAmount - statement.amount %}
           {% endif  %}
   
         {% elseif yeahr == yeahrNow and month == 5 %}
           {% if statement.amount > 0 %}
             {% set MaiAmount = MaiAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nMaiAmount = nMaiAmount - statement.amount %}
           {% endif  %}
   
         {% elseif yeahr == yeahrNow and month == 6 %}
           {% if statement.amount > 0 %}
             {% set JunAmount = JunAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nJunAmount = nJunAmount - statement.amount %}
           {% endif  %}
   
         {% elseif yeahr == yeahrNow and month == 7 %}
           {% if statement.amount > 0 %}
             {% set JulAmount = JulAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nJulAmount = nJulAmount - statement.amount %}
           {% endif  %}
   
         {% elseif yeahr == yeahrNow and month == 8 %}
           {% if statement.amount > 0 %}
             {% set AugAmount = AugAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nAugAmount = nAugAmount - statement.amount %}
           {% endif  %}
   
         {% elseif yeahr == yeahrNow and month == 9 %}
           {% if statement.amount > 0 %}
             {% set SepAmount = SepAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nSepAmount = nSepAmount - statement.amount %}
           {% endif  %}
   
         {% elseif yeahr == yeahrNow and month == 10 %}
           {% if statement.amount > 0 %}
             {% set OktAmount = OktAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nOktAmount = nOktAmount - statement.amount %}
           {% endif  %}
   
         {% elseif yeahr == yeahrNow and month == 11 %}
           {% if statement.amount > 0 %}
             {% set NovAmount = NovAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nNovAmount = nNovAmount - statement.amount %}
           {% endif  %}
   
         {% elseif yeahr == yeahrNow and month == 12 %}
           {% if statement.amount > 0 %}
             {% set DecAmount = DecAmount + statement.amount %}
           {% elseif statement.amount < 0 %}
             {% set nDecAmount = nDecAmount - statement.amount %}
           {% endif  %}
           
         {% endif  %}
   
       {% endfor %}
   
   
   
       <canvas id="financeChart"></canvas>
       <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js" integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw==" crossorigin="anonymous"></script>
       <script>
         var pJan = '{{ JanAmount }}';
         var pFeb = '{{ FebAmount }}';
         var pMar = '{{ MarAmount }}';
         var pApr = '{{ AprAmount }}';
         var pMai = '{{ MaiAmount }}';
         var pJun = '{{ JunAmount }}';
         var pJul = '{{ JulAmount }}';
         var pAug = '{{ AugAmount }}';
         var pSep = '{{ SepAmount }}';
         var pOct = '{{ OktAmount }}';
         var pNov = '{{ NovAmount }}';
         var pDez = '{{ DecAmount }}';
   
         var nJan = '{{ nJanAmount }}';
         var nFeb = '{{ nFebAmount }}';
         var nMar = '{{ nMarAmount }}';
         var nApr = '{{ nAprAmount }}';
         var nMai = '{{ nMaiAmount }}';
         var nJun = '{{ nJunAmount }}';
         var nJul = '{{ nJulAmount }}';
         var nAug = '{{ nAugAmount }}';
         var nSep = '{{ nSepAmount }}';
         var nOct = '{{ nOktAmount }}';
         var nNov = '{{ nNovAmount }}';
         var nDez = '{{ nDecAmount }}';
   
        //alert(pNov);
        //alert(nNov);
   
         var financeChartObject = document.getElementById('financeChart');
         var  chart = new Chart(financeChartObject, {
           type: 'bar',
           data: {
             labels: ["Januar","Februar", "März", "April","Mai","Juni","Juli","August","September","Oktober","November","Dezember"],
             datasets: [{
               label: "Einkommen",
               backgroundColor: 'rgba(65,105,255,0.4)',
               borderColor: 'rgba(65,105,255,1)',
               data: [pJan, pFeb, pMar, pApr, pMai, pJun, pJul, pAug, pSep, pOct, pNov, pDez]
             },{
                 label: "Ausgaben",
                 fill: true,
                 backgroundColor: 'rgba(255,0,0,0.4)',
                 borderColor: 'rgba(255,0,0,1)',
                 data: [nJan, nFeb, nMar, nApr, nMai, nJun, nJul, nAug, nSep, nOct, nNov, nDez]
               }]
           }
         });
   
       </script>
     </div>

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?