0

I am facing this challenge of creating multiple pieChart plot in my html page.

I have a for loop in the page and I want to plot the data.

I just insert the script inside the loop but it doesn't work.

the code is:

{% for welTsts in WellTsTProDChart %}
   
    <div id='{{welTsts.TestDate}}' class="container">
              <div class="row">
                  <div class="col-lg-6">
              </div></div>
    
    
                 <div class="col-lg-6">
                     <div class="card card-success">
                         <div class="card-header">
                           <h3 class="card-title">Production Tests: {{ welTsts.TestDate }} Oil {{ welTsts.TestOIL}} (m3/D)</h3>
                         </div>
                         <div class="card-body w3-light-grey solid">
                         
                           <canvas id='{{welTsts.TestDate}}' style="min-height: 230px; height: 230px; max-height: 245px; max-width: 100%;"</canvas>
                    
                                   {% block custom_js %}
                                   <script>
                                       $(document).ready(function(){
                                               //Data Set for PIE CHart
                                              var pieData  = {
                                                 labels: [
                                                     'OIl',
                                                     'Water'
                                                 ],
                                                 datasets: [
                                                   {
                                                     data: [{{ welTsts.TestOIL}} , {{ welTsts.TestWtr}}],
                                                     backgroundColor : ['#00a65a', '#5088f1'],
                                                   }
                                                 ]
                                               }
                                               var pieChartCanvas = $('#{{welTsts.TestDate}}').get(0).getContext('2d')
                                               var pieOptions     = {
                                                 maintainAspectRatio : false,
                                                 responsive : true,
                                               }
                                               //Create pie or douhnut chart
                                               // You can switch between pie and douhnut using the method below.
                                               var pieChart = new Chart(pieChartCanvas, {
                                                 type: 'pie',
                                                 data: pieData,
                                                 options: pieOptions
                                               })
                                       })
                                   </script>
                                    {% endblock custom_js %}
    </div></div></div></div></div>
    {% endfor %}

when I have just one data it doesn't know the variables (data: [{{ welTsts.TestOIL}} , {{ welTsts.TestWtr}}]) and if I set fixed number like data: [70, 30] it plot it but just one plot even if there is many plot to show as the images below. it take the last var inside the script and put it in the first element in for loop!

One Data and variable data

One Data and fixed data

many data and fixed data

and after adding unique Id

after adding unique ID

enter image description here

tibas
  • 139
  • 13
  • You can't do like this because id must be unique there is one option you will try declare a i which store the value of loop run then set the i postfix to canvas id and pie chart access id in js code – Sanjeev Kumar Jul 16 '20 at 15:14
  • For example piechart_{{i}} in canvas id and $('#pieChart_{{i}}') you can try like this and also declare before for loop and increase value of i inside for loop – Sanjeev Kumar Jul 16 '20 at 15:15
  • In fact I'am straggling with Js loop I uesd this code but didn't work? {% for welTsts in WellTsTProDChart %}

    – tibas Jul 16 '20 at 16:14
  • I have a unique date so I use it as unique ID like: and so I used a unique Div with the same id='{{welTsts.WellID}}' but when I check the consol I see last loop with empty ID see image – tibas Jul 16 '20 at 18:44

0 Answers0