User input chart

Hi there,

I am trying to get this to work where a user inputs a number from 1-10 for multiple choices and the result is then displayed on a radar chart.

I have it working as a standalone but am having real problems trying to get it working in wordpress.

Basically I post the following in a new page:
(I have included chart.js in the header.php file)

<script type=”text/javascript” src=”chart.js”></script>
<style>
canvas{
canvas{
}
</style>

<script>
var radarChartData = {
labels: [“OPTION – 1”, “OPTION – 2”, “OPTION – 3”, “OPTION – 4”, “OPTION – 5”, “OPTION – 6”, “OPTION – 7”, “OPTION – 8”, “OPTION – 9”, “OPTION – 10”, “OPTION – 11”, “OPTION – 12”],
datasets: [
{
label: “Wheel Of Life”,
fillColor: “rgba(220,220,220,0.2)”,
strokeColor: “rgba(255,153,0,1)”,
pointColor: “rgba(220,220,220,1)”,
pointStrokeColor: “#fff”,
pointHighlightFill: “#fff”,
pointHighlightStroke: “rgba(255,153,0,1)”,
data: [10,10,10,10,10,10,10, 10, 10, 10,10, 10]
}

]
};

//This is the function that renders the chart for the first time
window.onload = function(){
window.myRadarChart = new Chart(document.getElementById(“canvas”).getContext(“2d”)).Radar(radarChartData, {
responsive: true
});

}

//For Every Change of value this is the function that renders the chart. All the actions have to be attached to this function. That should be pretty much it.
function runSubmitFunction() {
//myRadarChart.datasets[0].points[0].value =
var datalist = document.getElementById (“browsers”);
myRadarChart.datasets[0].points[0].value = document.getElementById (“data1”).value;
myRadarChart.datasets[0].points[1].value = document.getElementById (“data2”).value;
myRadarChart.datasets[0].points[2].value = document.getElementById (“data3”).value;
myRadarChart.datasets[0].points[3].value = document.getElementById (“data4”).value;
myRadarChart.datasets[0].points[4].value = document.getElementById (“data5”).value;
myRadarChart.datasets[0].points[5].value = document.getElementById (“data6”).value;
myRadarChart.datasets[0].points[6].value = document.getElementById (“data7”).value;
myRadarChart.datasets[0].points[7].value = document.getElementById (“data8”).value;
myRadarChart.datasets[0].points[8].value = document.getElementById (“data9”).value;
myRadarChart.datasets[0].points[9].value = document.getElementById (“data10”).value;
myRadarChart.datasets[0].points[10].value = document.getElementById (“data11”).value;
myRadarChart.datasets[0].points[11].value = document.getElementById (“data12”).value;
myRadarChart.update();
}

</script>

<form>
<p>
<h1>Radar</h1></p>

<p>
<label>OPTION – 1</label>
<select name=”mydropdown” id = “data1”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 2</label>
<select name=”mydropdown” id = “data2”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 3</label>
<select name=”mydropdown” id = “data3”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 4</label>
<select name=”mydropdown” id = “data4”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 5</label>
<select name=”mydropdown” id = “data5”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 6</label>
<select name=”mydropdown” id = “data6”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 7</label>
<select name=”mydropdown” id = “data7”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 8</label>
<select name=”mydropdown” id = “data8”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 9</label>
<select name=”mydropdown” id = “data9”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 10</label>
<select name=”mydropdown” id = “data10”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 11</label>
<select name=”mydropdown” id = “data11”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<p>
<label>OPTION – 12</label>
<select name=”mydropdown” id = “data12”>
<option> 1
<option> 2
<option> 3
<option> 4
<option> 5
<option> 6
<option> 7
<option> 8
<option> 9
<option> 10
</select>
</p>

<label id=”myLbl” for = “mysel” >
</label>

<input type = “submit” value=”submit” onclick=”runSubmitFunction();return false” />
</form>

<div style=”width:50%”>
<canvas id=”canvas” height=”300″ width=”300″ ></canvas>
</div>

https://www.ads-software.com/plugins/wp-charts/