Graphs a function.

grapher.js

var rangeUpper = 10;
var rangeLower = -20;
var domainUpper = 20;
var domainLower = -50;

var numLines = rangeUpper - rangeLower;

// Math function being used
function mathFunction(variable) {
  //var result = 10 * Math.sin(variable / Math.PI);
  var result = Math.abs(1 * variable ) - 4;
  return result;
}

// Sets lines up into an array
function generateLines(numLines){
  var lines = [];
  for(var i = 0; i < numLines; i++) {
    lines.push(document.createElement('div'));
  }
  return lines;
}

// Generates line to be set along the y-axis
function setLine(currentLine) {
  
  var text = '';
  var y = 0;
  var c = rangeUpper - currentLine;
  
  for (var x = domainLower; x <= domainUpper; x++) {
    
    y = Math.floor(mathFunction(x));
    
    // If line number matches result of function, then create an asterisk.
    if (c === 0 && x === 0) {
      text = text + '+';
    } 
    else if (c === 0) {
      text = text + '-';
    } 
    else if (x === 0) {
      text = text + '|';
    }
    else if (c === y) {
      text = text + '*';
    } 
    else { // Otherwise, create a space. 
      text = text + ' ';
    }
  } 
  return text;
}

// Puts line computed by generateLine into the array with lines
function textContent(elementsArray) {
  
  for (var currentLine = elementsArray.length - 1; currentLine >= 0; currentLine--) {
    console.log(currentLine);
    var content = setLine(currentLine);
    elementsArray[currentLine].textContent = content;
  }
}

function insertElements(elementsArray, parentElement) {
  for (var i = 0; i < elementsArray.length; i++) {
    parentElement.appendChild(elementsArray[i]);
  }
}

var lines = generateLines(numLines);
textContent(lines);
insertElements(lines, document.body);