title: How to chart two inputs of several variables in HTML
body: <p>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. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>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);
  })();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;!DOCTYPE HTML&gt;
      &lt;html&gt;
      &lt;head&gt;
        &lt;script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
      &lt;div class="col-sm-4" id="userdata"&gt;
        &lt;h3&gt;Enter your data&lt;/h3&gt;
        &lt;input type="number" id="Career" placeholder="Career: Rating"&gt;
        &lt;input type="number" id="CareerT" placeholder="Career: Time"&gt;
        &lt;br&gt;
        &lt;input type="number" id="Finance" placeholder="Finance: Rating"&gt;
        &lt;input type="number" id="FinanceT" placeholder="Finance: Time"&gt;
        &lt;br&gt;
        &lt;input type="number" id="PG" placeholder="Personal Growth: Rating"&gt;
        &lt;input type="number" id="PGT" placeholder="Personal Growth: Time"&gt;
        &lt;br&gt;
        &lt;input type="number" id="Health" placeholder="Health: Rating"&gt;
        &lt;input type="number" id="HealthT" placeholder="Health: Time"&gt;
        &lt;br&gt;
        &lt;input type="number" id="Family" placeholder="Family: Rating"&gt;
        &lt;input type="number" id="FamilyT" placeholder="Family: Time"&gt;
        &lt;br&gt;
        &lt;input type="number" id="Relationships" placeholder="Relationships: Rating"&gt;
        &lt;input type="number" id="RelationshipsT" placeholder="Relationships: Time"&gt;
        &lt;br&gt;
        &lt;input type="number" id="SL" placeholder="Social Life: Rating"&gt;
        &lt;input type="number" id="SLT" placeholder="Social Life: Time"&gt;
        &lt;br&gt;
        &lt;input type="number" id="Attitude" placeholder="Attirude: Rating"&gt;
        &lt;input type="number" id="AttitudeT" placeholder="Attitude: Time"&gt;
        &lt;br&gt;
        &lt;button id="renderButton"&gt;Add DataPoint &amp;amp; Render&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="chartContainer" style="height: 300px; width: 100%;"&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>