How to chart two inputs of several variables in HTML

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);
})();

    
    
    
      
    
    
    
      Enter your data

miile7 · Accepted Answer

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:

Create the graph when the user clicks the button (I did that in my example)
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);
}


    
    
      
    
    
    
      Enter your data

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

The & character is a special entity in html. Use &.
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.

How to chart two inputs of several variables in HTML

Answers (1)

Related Questions