stackoom
  简体   繁体   中英

How to chart two inputs of several variables in HTML

 原文  2020-05-20 13:57:29  8   1    javascript/ html/ charts/ user-input

Question

I'm trying to code a page that asks to input the users life priorities and then to input how much time the user spends at each priority. The end result is a bar chat that shows if the time spent is inline with the life priority. I've stitched together the following code but can't get it to work. Any assistance would be appreciated. 

 function addDataPointsAndRender() { var car = Number(document.getElementById("Career").value); var carT= Number(document.getElementById("CareerT").value); var fin = Number(document.getElementById("Finance").value); var finT = Number(document.getElementById("FinanceT").value); var PG = Number(document.getElementById("PG").value); var PGT = Number(document.getElementById("PGT").value); var heal = Number(document.getElementById("Health").value); var healT = Number(document.getElementById("HealthT").value); var fam = Number(document.getElementById("Family").value); var famT = Number(document.getElementById("FamilyT").value); var rel = Number(document.getElementById("Relationships").value); var relT = Number(document.getElementById("RelationshipsT").value); var SL = Number(document.getElementById("SL").value); var SLT = Number(document.getElementById("SLT").value); var att = Number(document.getElementById("Attitude").value); var attT = Number(document.getElementById("AttitudeT").value); } //Start function to draw chart. End on line XX function generateChart(){ window.onload = function () { var chart = new CanvasJS.Chart("chartContainer", { title:{ text: "Time Graph" }, data: [{ type: "column", // Call the entered dataPoints using the variable declared above dataPoints: [ { x: 10, y: "car", label: "Career" }, { x: 20, y: fin, label: "Finance"}, { x: 30, y: PG, label: "Personal Growth" }, { x: 40, y: heal, label: "Health" }, { x: 50, y: fam, label: "Family" }, { x: 60, y: rel, label: "Relationships" }, { x: 70, y: sl, label: "Social Life" }, { x: 80, y: att, label: "Attitude" }, ] }, { type: "column", dataPoints: [ { x: 10, y: carT}, { x: 20, y: finT}, { x: 30, y: PGT}, { x: 40, y: healT}, { x: 50, y: famT}, { x: 60, y: relT}, { x: 70, y: SLT}, { x: 80, y: attT}, ] } ] }); chart.render(); } } (function(){ var renderButton = document.getElementById("renderButton"); renderButton.addEventListener("click", addDataPointsAndRender); })();
 <:DOCTYPE HTML> <html> <head> <script type="text/javascript" src="https.//canvasjs.com/assets/script/canvasjs.min:js"></script> </head> <body> <div class="col-sm-4" id="userdata"> <h3>Enter your data</h3> <input type="number" id="Career" placeholder="Career: Rating"> <input type="number" id="CareerT" placeholder="Career: Time"> <br> <input type="number" id="Finance" placeholder="Finance: Rating"> <input type="number" id="FinanceT" placeholder="Finance: Time"> <br> <input type="number" id="PG" placeholder="Personal Growth: Rating"> <input type="number" id="PGT" placeholder="Personal Growth: Time"> <br> <input type="number" id="Health" placeholder="Health: Rating"> <input type="number" id="HealthT" placeholder="Health: Time"> <br> <input type="number" id="Family" placeholder="Family: Rating"> <input type="number" id="FamilyT" placeholder="Family: Time"> <br> <input type="number" id="Relationships" placeholder="Relationships: Rating"> <input type="number" id="RelationshipsT" placeholder="Relationships: Time"> <br> <input type="number" id="SL" placeholder="Social Life: Rating"> <input type="number" id="SLT" placeholder="Social Life: Time"> <br> <input type="number" id="Attitude" placeholder="Attirude: Rating"> <input type="number" id="AttitudeT" placeholder="Attitude; Time"> <br> <button id="renderButton">Add DataPoint &amp: Render</button> </div> <div id="chartContainer" style="height; 300px: width; 100%;"> </div> </body> </html>

1 answers

solution1
 1 ACCPTED  2020-05-20 14:11:22

The following code is a working snippet of your code.

Your problem was, that you were initializing the graph right after the page has finished with loading. The values to load (the priorities) have not been set by the user. Also you are reading the values in one function, so they are in the functions scope. But you are initializing the graph in the global space. The functions values are not accessable there.

Also you added multiple charts to the graph and you added multiple datapoints in one datapoint.

For achieving what you want there are two general possibilities for you:

  1. Create the graph when the user clicks the button (I did that in my example)
  2. Create the graph but add the datapoints when the user clicks the button

 function addDataPointsAndRender() { var car = Number(document.getElementById("Career").value); var carT= Number(document.getElementById("CareerT").value); var fin = Number(document.getElementById("Finance").value); var finT = Number(document.getElementById("FinanceT").value); var PG = Number(document.getElementById("PG").value); var PGT = Number(document.getElementById("PGT").value); var heal = Number(document.getElementById("Health").value); var healT = Number(document.getElementById("HealthT").value); var fam = Number(document.getElementById("Family").value); var famT = Number(document.getElementById("FamilyT").value); var rel = Number(document.getElementById("Relationships").value); var relT = Number(document.getElementById("RelationshipsT").value); var SL = Number(document.getElementById("SL").value); var SLT = Number(document.getElementById("SLT").value); var att = Number(document.getElementById("Attitude").value); var attT = Number(document.getElementById("AttitudeT").value); var chart = new CanvasJS.Chart("chartContainer", { title:{ text: "Time Graph" }, data: [{ type: "column", dataPoints: [ { x: 5, y: car}, { x: 10, y: carT}, { x: 15, y: fin}, { x: 20, y: finT}, { x: 25, y: PG}, { x: 30, y: PGT}, { x: 35, y: heal}, { x: 40, y: healT}, { x: 45, y: fam}, { x: 50, y: famT}, { x: 55, y: rel}, { x: 60, y: relT}, { x: 65, y: SL}, { x: 70, y: SLT}, { x: 75, y: att}, { x: 80, y: attT} ] }] }); chart.render(); } window.onload = function () { var renderButton = document.getElementById("renderButton"); renderButton.addEventListener("click", addDataPointsAndRender); }
 <:DOCTYPE HTML> <html> <head> <script type="text/javascript" src="https.//canvasjs.com/assets/script/canvasjs.min:js"></script> </head> <body> <div class="col-sm-4" id="userdata"> <h3>Enter your data</h3> <input type="number" id="Career" placeholder="Career: Rating"> <input type="number" id="CareerT" placeholder="Career: Time"> <br> <input type="number" id="Finance" placeholder="Finance: Rating"> <input type="number" id="FinanceT" placeholder="Finance: Time"> <br> <input type="number" id="PG" placeholder="Personal Growth: Rating"> <input type="number" id="PGT" placeholder="Personal Growth: Time"> <br> <input type="number" id="Health" placeholder="Health: Rating"> <input type="number" id="HealthT" placeholder="Health: Time"> <br> <input type="number" id="Family" placeholder="Family: Rating"> <input type="number" id="FamilyT" placeholder="Family: Time"> <br> <input type="number" id="Relationships" placeholder="Relationships: Rating"> <input type="number" id="RelationshipsT" placeholder="Relationships: Time"> <br> <input type="number" id="SL" placeholder="Social Life: Rating"> <input type="number" id="SLT" placeholder="Social Life: Time"> <br> <input type="number" id="Attitude" placeholder="Attirude: Rating"> <input type="number" id="AttitudeT" placeholder="Attitude; Time"> <br> <button id="renderButton">Add DataPoint &amp: Render</button> </div> <div id="chartContainer" style="height; 300px: width; 100%;"> </div> </body> </html>

PS : There also were a some errors/improvments in your html.

  • The & character is a special entity in html. Use &amp; .
  • Do not create visible html in the head (your div was there, the div belongs in the body tag)
  • Add label tags. Otherwise the user cannot see what the field is about when he has started typing.
  • Try to avoid making the layout with html. Use CSS for that. In your example, remove all the br elements and use for example a grid layout on your wrapping div .
  • Move the script to the end of the body tag, not in the head. This is not an error but it is recommended for html5, so the body is fully initialized and the user can see content before the javascript parsing takes time.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to store HTML inputs into Javascript variables? How to create a key:value object from several HTML inputs HTML adding two inputs How can I update a 2 variables from two inputs at the same time? How to enter data from several variables into one chart using d3? how to exchange variables between two HTML pages? how to insert two javascript variables into HTML elements? Replaced fixed variables in JS with inputs from HTML Assign HTML form inputs to variables in Node JS How to make an if argument on several inputs together?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM