Demo

/* This will create a KPI tile in the given div ID */

var value = 30000000;
var budget = 35000000;
var val_change = value - budget;
var rate_of_change = val_change / budget * 100;

function createKpiTile(div_id, value, budget) {
    /* Calculate values */
    var val_change = value - budget;
    var rate_of_change = val_change / budget * 100;    
    console.log("Changes ARE working");
    var container = document.getElementById(div_id);
    var kpiTile = document.createElement("div");
    kpiTile.style.width = '300px';
    kpiTile.style.height = '200px';
    kpiTile.style.border = '2px solid black';
    kpiTile.style.margin = 'auto';
    kpiTile.style.marginTop = '45px'; 
    kpiTile.style.marginBottom = '45px';
    //kpiTile.style.backgroundColor = '#6f7476';

    container.appendChild(kpiTile);
    
    var paddingDiv = document.createElement("div"); //.className("paddingDiv");
    paddingDiv.style.padding = '10px';
    paddingDiv.style.height = '90%';
    paddingDiv.style.backgroundColor = 'AliceBlue';
    //paddingDiv.innerText = "Padding Div";
    kpiTile.appendChild(paddingDiv);
    
    var headerDiv = document.createElement("div"); 
    headerDiv.style.paddingBottom = '4px';
    headerDiv.style.backgroundColor = '#d5edf0';
    headerDiv.style.display = "none";
    headerDiv.innerHTML = "Header";
    paddingDiv.appendChild(headerDiv);

    var titleDiv = document.createElement("div"); 
    titleDiv.style.height = '35px';
    titleDiv.style.padding = '5px';
    titleDiv.style.paddingBottom = '5px';
    titleDiv.style.fontSize = '20px';
    //titleDiv.style.backgroundColor = '#9c9ae3';
    titleDiv.innerHTML = "Metric";
    paddingDiv.appendChild(titleDiv);
    
    var valueVDiv = document.createElement("div"); 
    valueVDiv.style.display = 'table';
    //valueVDiv.style.position = 'relative';
    valueVDiv.style.bottom = '10px';
    valueVDiv.style.height = '90px';
    valueVDiv.style.width = '100%';
    //valueVDiv.innerHTML = "valueVDiv";
    //valueVDiv.style.backgroundColor = '#92bace';
    paddingDiv.appendChild(valueVDiv);
    
    var valueDiv = document.createElement("div"); 
    valueDiv.style.display = 'table-cell';
    //valueVDiv.style.position = 'relative';
    valueDiv.style.verticalAlign = 'middle';
    valueDiv.style.textAlign = 'center';
    valueDiv.style.fontSize = '46px'; 
    valueDiv.style.fontWeight = 'bold';
    valueDiv.innerHTML = "$" + delimitNumbers(value);
    //valueDiv.style.backgroundColor = '#badae1';
    valueVDiv.appendChild(valueDiv);
    
    var footerVDiv = document.createElement("div"); 
    footerVDiv.style.display = 'table';
    //valueVDiv.style.position = 'relative';
    footerVDiv.style.bottom = '10px';
    footerVDiv.style.height = '45px';
    footerVDiv.style.width = '100%';
    //footerVDiv.innerHTML = "valueVDiv";
    footerVDiv.style.backgroundColor = '#d5edf0';
    paddingDiv.appendChild(footerVDiv);

    var footerDiv = document.createElement("div"); 
    footerDiv.style.display = 'table-cell';
    //valueVDiv.style.position = 'relative';
    footerDiv.style.verticalAlign = 'middle';
    footerDiv.style.textAlign = 'center';
    footerDiv.style.fontWeight = 'bold';
    //footerDiv.style.width = '100%';
    footerDiv.innerHTML = delimitNumbers(val_change) + 
        " (" + toPercent(rate_of_change, 2) + ")";
    if (val_change < 0) {
        footerDiv.classList.add("bad");
    }
    else {
        footerDiv.classList.add("good");
    }
    //footerDiv.style.backgroundColor = '	#9c9ae3';
    footerVDiv.appendChild(footerDiv);        
 
/*
    var footerDiv = document.createElement("div"); 
    footerDiv.style.paddingBottom = '4px';
    footerDiv.style.position = 'relative';
    footerDiv.style.bottom = '10px';
    footerDiv.style.backgroundColor = '#d5edf0';
    footerDiv.innerHTML = "footerDiv";
    paddingDiv.appendChild(footerDiv);*/
}

function delimitNumbers(str) {
  return (str + "").replace(/\b(\d+)((\.\d+)*)\b/g, function(a, b, c) {
    return (b.charAt(0) > 0 && !(c || ".").lastIndexOf(".") ? b.replace(/(\d)(?=(\d{3})+$)/g, "$1,") : b) + c;
  });
}

function toPercent(num, places) {
    return num.toFixed(places) + '%';
}