Title: User input chart
Last modified: August 22, 2016

---

# User input chart

 *  [aiofe](https://wordpress.org/support/users/aiofe/)
 * (@aiofe)
 * [11 years, 7 months ago](https://wordpress.org/support/topic/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://wordpress.org/plugins/wp-charts/](https://wordpress.org/plugins/wp-charts/)

The topic ‘User input chart’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/wp-charts_b1d6e1.svg)
 * [WordPress Charts](https://wordpress.org/plugins/wp-charts/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/wp-charts/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/wp-charts/)
 * [Active Topics](https://wordpress.org/support/plugin/wp-charts/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/wp-charts/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/wp-charts/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [aiofe](https://wordpress.org/support/users/aiofe/)
 * Last activity: [11 years, 7 months ago](https://wordpress.org/support/topic/user-input-chart/)
 * Status: not resolved