Pie Chart from Form Data (Radio buttons)- CanvasJS JavaScript Charts

Pie Chart from Form Data (Radio buttons)- CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<form>
  <p>1. Question 1?<br>
    <input type="radio" id="radio11" name="radio1" value="10">Never<br>
    <input type="radio" id="radio12" name="radio1" value="20">Rarely<br>
    <input type="radio" id="radio13" name="radio1" value="30">Sometimes<br>
    <input type="radio" id="radio14" name="radio1" value="40">Often<br>
    <input type="radio" id="radio15" name="radio1" value="50">Always
  </p>

  <p>2.Question 2?<br>
    <input type="radio" id="radio21" name="radio2" value="10">Never<br>
    <input type="radio" id="radio22" name="radio2" value="20">Rarely<br>
    <input type="radio" id="radio23" name="radio2" value="30">Sometimes<br>
    <input type="radio" id="radio24" name="radio2" value="40">Often<br>
    <input type="radio" id="radio25" name="radio2" value="50">Always
  </p>
  <input type="button" onclick="renderChart()" value="Submit">
</form>

<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

function renderChart() {
  var elements1 = document.getElementsByName("radio1");
  var elements2 = document.getElementsByName("radio2");

  var avg = [];
  for(var i=0;i<elements1.length;i++){
  	if(elements1[i].checked && elements2[i].checked){   
			avg[i] = (parseFloat(elements1[i].value)+parseFloat(elements2[i].value))/2;
		}
    else if(elements1[i].checked){
			avg[i] = (parseFloat(elements1[i].value))/2;
    }
    else if(elements2[i].checked){
    	avg[i] = (parseFloat(elements2[i].value))/2;
    }
    else{
    	avg[i] = 0;
    }
  }
  
	var dataPoints = [];
  for(var i=0; i<avg.length;i++){
  	dataPoints.push({y:avg[i], indexLabel:"{y}"});
  }
  var chart = new CanvasJS.Chart("chartContainer", {
  	title: {
    	text: "Pie Chart from Form Data"
    },
    data: [{
      type: "pie",
      dataPoints: dataPoints
    }]
  });

  chart.render();
}