I need to show Div result of HTML/Js page in bar chart?

Question

I need to show the result of below mention code in bar chart.Is it possible to show the result of below code for survey to show in bar chart ?So i put the code here as suggested

Answer 1

Here is working simple bar chart for you. You can use chartJS library to achieve the results you are after.

First, we need to define the chart options and in those options you can load your data dynamically which come from the results.

I have made two sections which show Total Scored and Percentage of each section as well. The Bar Chart will appear just below the final-results table

The chart data will change accordingly to the results and question scores when you click on Show Results button. The chart also appears in your PDF as well.

Live Demo:

function displayRadioValue() {
  let section1 = document.querySelectorAll('.section-1 > input[type="radio"]')
  let section2 = document.querySelectorAll('.section-2 > input[type="radio"]')
  let fullName = document.querySelector('#fullName').value
  let email = document.querySelector('#email').value
  let age = document.querySelector('#age').value
  var ctx = document.querySelector('#resultsChart').getContext('2d');
  let section1Total = 0
  let section2Total = 0
  let section1Question = 0
  let section2Question = 0
  let finalResults = document.querySelector('.final-results')
  let result1 = ''
  let result2 = ''
  finalResults.innerHTML = ''

  //Section 1
  section1.forEach(function(radio, index) {
    if (radio.checked) {
      section2Question++
      section1Total += +radio.value
    }
  })

  //Section 2
  section2.forEach(function(radio, index) {
    if (radio.checked) {
      section1Question++
      section2Total += +radio.value
    }
  })

  var options = {
    type: 'bar',
    data: {
      labels: ["Section 1", "Section 2"],
      datasets: [{
          label: 'Total Scored',
          data: [section1Question, section2Question, 30],
          backgroundColor: '#E91E63',
          borderWidth: 1
        },
        {
          label: 'Percentage %',
          data: [((section1Total / (section1Question * 3)) * 100).toFixed(2), ((section2Total / (section2Question * 3)) * 100).toFixed(2), 30],
          backgroundColor: '#004D40',
          borderWidth: 1
        }
      ]
    },
    options: {
      scales: {
        responsive: true,
        yAxes: [{
          ticks: {
            reverse: false
          }
        }]
      }
    }
  }

  //Final Results and validation
  if (fullName.value != '' && email.value != '' && age.value != '') {
    if (section1Total > 0 && section2Total > 0) {
      finalResults.innerHTML += genDetails(fullName, email, age)
      finalResults.innerHTML += "
Results
"
      finalResults.innerHTML += genTable(section1Question, section1Total, 1)
      finalResults.innerHTML += genTable(section2Question, section2Total, 2)
      finalResults.innerHTML += "
Chart Results
"
      document.getElementById("control").style.display = "block";
      document.getElementById("resultsChart").style.display = "block";
      document.getElementById("toemail").href += document.querySelector(".final-results").innerText;
      new Chart(ctx, options); //show chart
    } else {
      finalResults.innerHTML = 'Snap! Please select the atleast one survey question from each section '
    }
  } else {
    finalResults.innerHTML = 'Snap! Please enter your name, emial, age in the first section '
  }
}

function genDetails(name, email, age) {
  var result = "
Personal Info
"
  result += "Full name: " + name + "
"
  result += "Email name: " + email + "
"
  result += "Age:  " + age + "
"
  return result
}

function genTable(ques, total, section) {
  var result = "Section " + section + ":
"
  var tr = "" + total + "" + ((total / (ques * 3)) * 100).toFixed(2) + ""
  result += "" + tr + "
Total Score
Percentage
"
  return result
}

canvas {
  display: none
}

@media print {
  body * {
    visibility: hidden;
  }
  canvas {
    visibility: visible;
    margin-top: 30%;
  }
  .form-control {
    visibility: visible;
  }
  .final-results * {
    visibility: visible;
  }
  .final-results,
  .form-control {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
  }
}

table,
table tr th,
table tr td {
  border: 1px solid black;
}

  
  
  
  
  
  
  
  



  

    

      

        
Survey
        

          
Personal Info
          
Section 1
          
Section 2
          
Results
        
        

        

          

            

              Full Name address
              
              Please enter your full name.
            
            

              Email address
              
              Please enter your valid email address.
            
            

              Password
              
              Please enter your age in number.
            
          
          

            

              

                

                  
Question 1:
                  

                    

                      
                      
                              1
                            
                    
                    

                      
                      
                              2
                            
                    
                    

                      
                      
                              3
                            
                    
                  
                
              
              

                

                  
Question 2:
                  

                    

                      
                      
                              1
                            
                    
                    

                      
                      
                              2
                            
                    
                    

                      
                      
                              3
                            
                    
                  
                
              
              

                

                  
Question 3:
                  

                    

                      
                      
                              1
                            
                    
                    

                      
                      
                              2
                            
                    
                    

                      
                      
                              3
                            
                    
                  
                
              
            
          
          

            

              

                

                  
Question 4:
                  

                    

                      
                      
                              1
                            
                    
                    

                      
                      
                              2
                            
                    
                    

                      
                      
                              3
                            
                    
                  
                
              
              

                

                  
Question 5:
                  

                    

                      
                      
                              1
                            
                    
                    

                      
                      
                              2
                            
                    
                    

                      
                      
                              3
                            
                    
                  
                
              
              

                

                  
Question 4:
                  

                    

                      
                      
                              1
                            
                    
                    

                      
                      
                              2
                            
                    
                    

                      
                      
                              3
                            
                    
                  
                
              
              

                

                  
Question 4:
                  

                    

                      
                      
                              1
                            
                    
                    

                      
                      
                              2
                            
                    
                    

                      
                      
                              3
                            
                    
                  
                
              
            
          
          

            

            

            
            

            
                        Show Results
                    
            

            

            

              Send to
                        email Send to PDF