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 += "<h2>Results</h2>"
      finalResults.innerHTML += genTable(section1Question, section1Total, 1)
      finalResults.innerHTML += genTable(section2Question, section2Total, 2)
      finalResults.innerHTML += "<h2>Chart Results</h2>"
      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 = "<h2>Personal Info</h2>"
  result += "<b>Full name:</b> <span>" + name + "</span><br>"
  result += "<b>Email name:</b> <span>" + email + "</span><br>"
  result += "<b>Age: </b> <span>" + age + "</span><br>"
  return result
}

function genTable(ques, total, section) {
  var result = "<b>Section " + section + ":</b><br>"
  var tr = "<tr><th>" + total + "</th><th>" + ((total / (ques * 3)) * 100).toFixed(2) + "</th></tr>"
  result += "<table><thead><tr><th>Total Score</th><th>Percentage</th></tr></thead><tbody>" + tr + "</tbody></table>"
  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;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Survey Question</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js" integrity="sha512-s+xg36jbIujB2S2VKfpGmlC3T5V2TF3lY48DX7u2r9XzGzgPsa6wTpOQA7J9iffvdeBN0q9tKzRxVxw1JviZPg==" crossorigin="anonymous"></script>
</head>

<body>
  <section class="container py-4">
    <div class="row">
      <div class="col-md-12">
        <h2>Survey</h2>
        <ul id="tabs" class="nav nav-tabs">
          <li class="nav-item"><a href="" data-target="#personalInfo" data-toggle="tab" class="nav-link small text-uppercase active">Personal Info</a></li>
          <li class="nav-item"><a href="" data-target="#section1" data-toggle="tab" class="nav-link small text-uppercase">Section 1</a></li>
          <li class="nav-item"><a href="" data-target="#section2" data-toggle="tab" class="nav-link small text-uppercase">Section 2</a></li>
          <li class="nav-item"><a href="" data-target="#results" data-toggle="tab" class="nav-link small text-uppercase">Results</a></li>
        </ul>
        <br>
        <div id="tabsContent" class="tab-content">
          <div id="personalInfo" class="tab-pane fade active show">
            <div class="form-group">
              <label for="fullName">Full Name address</label>
              <input type="email" class="form-control" id="fullName" aria-describedby="nameHelp" placeholder="Enter full name">
              <small id="nameHelp" class="form-text text-muted">Please enter your full name.</small>
            </div>
            <div class="form-group">
              <label for="email">Email address</label>
              <input type="email" class="form-control" id="email" aria-describedby="email" placeholder="Enter email">
              <small id="email" class="form-text text-muted">Please enter your valid email address.</small>
            </div>
            <div class="form-group">
              <label for="age">Password</label>
              <input type="number" class="form-control" id="age" aria-describedby="age" placeholder="Age">
              <small id="age" class="form-text text-muted">Please enter your age in number.</small>
            </div>
          </div>
          <div id="section1" class="tab-pane fade">
            <div class="section-1-questions">
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 1:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question1" id="gridRadios1" value="1">
                      <label class="form-check-label" for="gridRadios1">
                              1
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input " type="radio" name="question1" id="gridRadios2" value="2">
                      <label class="form-check-label" for="gridRadios2">
                              2
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question1" id="gridRadios3" value="3">
                      <label class="form-check-label" for="gridRadios3">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 2:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question2" id="gridRadios4" value="1">
                      <label class="form-check-label" for="gridRadios4">
                              1
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question2" id="gridRadios5" value="2">
                      <label class="form-check-label" for="gridRadios5">
                              2
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question2" id="gridRadios6" value="3">
                      <label class="form-check-label" for="gridRadios6">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 3:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question3" id="gridRadios7" value="1">
                      <label class="form-check-label" for="gridRadios7">
                              1
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question3" id="gridRadios8" value="2">
                      <label class="form-check-label" for="gridRadios8">
                              2
                            </label>
                    </div>
                    <div class="form-check section-1">
                      <input class="form-check-input" type="radio" name="question3" id="gridRadios9" value="3">
                      <label class="form-check-label" for="gridRadios9">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
          <div id="section2" class="tab-pane fade">
            <div class="section-2-question">
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question4" id="gridRadios10" value="1">
                      <label class="form-check-label" for="gridRadios10">
                              1
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question4" id="gridRadios11" value="2">
                      <label class="form-check-label" for="gridRadios11">
                              2
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question4" id="gridRadios12" value="3">
                      <label class="form-check-label" for="gridRadios12">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 5:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question5" id="gridRadios13" value="1">
                      <label class="form-check-label" for="gridRadios13">
                              1
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question5" id="gridRadios14" value="2">
                      <label class="form-check-label" for="gridRadios14">
                              2
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question5" id="gridRadios15" value="3">
                      <label class="form-check-label" for="gridRadios15">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question6" id="gridRadios16" value="1">
                      <label class="form-check-label" for="gridRadios16">
                              1
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question6" id="gridRadios17" value="2">
                      <label class="form-check-label" for="gridRadios17">
                              2
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question6" id="gridRadios18" value="3">
                      <label class="form-check-label" for="gridRadios18">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
              <fieldset class="form-group">
                <div class="row">
                  <legend class="col-form-label col-sm-2 pt-0">Question 4:</legend>
                  <div class="col-sm-10">
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question7" id="gridRadios19" value="1">
                      <label class="form-check-label" for="gridRadios19">
                              1
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question7" id="gridRadios20" value="2">
                      <label class="form-check-label" for="gridRadios20">
                              2
                            </label>
                    </div>
                    <div class="form-check section-2">
                      <input class="form-check-input" type="radio" name="question7" id="gridRadios21" value="3">
                      <label class="form-check-label" for="gridRadios21">
                              3
                            </label>
                    </div>
                  </div>
                </div>
              </fieldset>
            </div>
          </div>
          <div id="results" class="tab-pane fade">
            <div class="final-results"></div>
            <br>
            <canvas id="resultsChart"></canvas>
            <br>
            <button type="button" class="btn btn-success" onclick="displayRadioValue()">
                        Show Results
                    </button>
            <br>
            <br>
            <div id="control" style="display: none">
              <a id="toemail" class="btn btn-link" href="mailto:youremail@domain.com?subject=Survey response&body=">Send to
                        email</a>&nbsp;<button onclick="window.print();" class="btn btn-warning">Send to PDF</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>