none
I am trying to build a bar chart using SharePoint online list and JavaScript RRS feed

  • Question

  • I have a Employee Summary list that has Status, Department fields. I need to build a bar chart tallying the number of each department that has the status of Onboard. I found the below code which is not working. Can you help please?

    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js"></script>

    <style>
    #h3_staffsum{
    color:red;
    padding-left: 10%;
    padding-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    }
    .chart-container {
    ;
    }
    #dashbrd_content{
    background-color:aliceblue;
    width: 45%;
    padding: 10px;
    }

    </style>

    <script>


    $(document).ready(function () {
      var siteWebUrl = _spPageContextInfo.webAbsoluteUrl;
      var requestUri =  siteWebUrl + "/_api/Web/lists/GetByTitle('EmployeeSummary')/items?$top=10&$orderby=Department";
    $.ajax({
    url: requestUri,
    type: "GET",
    headers: { "Accept": "application/json;odata=verbose" },
    success: function(data){
    alert('success');
    var counterIT10=0;
    var counterIT12=0;
    var counterIT13=0;
    var counterIT14=0;
    $.each(data.d.results, function(index, item) {
    // alert(item.Department);
    if (item.Department=='IT10' && item.Status=='Onboard')

    {
       counterIT10++; 
       alert(counterIT10);
    }
    if(item.Department=='IT12' && item.Status =='Onboard')


      counterIT12++;
      alert(counterIT12);
    }
    if(item.Department=='IT13' && item.Status=='Onboard')
    {   
      counterIT13++; 
      alert(counterIT13);
    }
    });

    alert('I am arriving at this point.');
    var myTotal = counterIT10 + counterIT12 + counterIT13;
    alert('My total is: ');
    alert(myTotal);

        //Initialize the chart   
                          var context = document.getElementById("myChart").getContext("2d");  
                var myChart = new Chart(context, {  
                              type: 'doughnut', // type of chart doughnet or pie  
                              // The data for our dataset  
                              data: {  
                                  labels: ["IT10", "IT12", "IT13", "TOTAL"], // label array collection  
                                  datasets: [{  
                                      data: [counterIT10,counterIT12,counterIT13,myTotal], // count array collection  
                                      backgroundColor: [  
                                          'rgb(244, 244, 66)',  
                                          'rgb(95, 239, 59)',  
                                          'rgb(219, 40, 13)',  
                                          'rgb(234, 148, 63)',  
                                          'rgb(211, 45, 229)',  
                                      ],  
                                  }]  
                              },  
                          });


    }
    });
    });




    </script>







    <div id="dashbrd_content">
    <h3 id="h3_staffsum">ACTUAL ONBOARD - TODATE</h3>
    </div>
    <div id="dashbrd_content">
    <div class="chart-container"> <canvas id=”chart”></canvas></div>
    </div>


    faye fouladi

    Friday, October 9, 2020 7:25 PM