Status Indicator based on Due Date - sharepoint

Question

I have a "Priority Indicator" column in my SharePoint page which shows a bullet point of either green, yellow or red. I cannot seem to find anywhere any help on how I can code this to link with "Due Date" column.
At the moment my status indicators only show if high, normal or low on "Priority" are selected.
For the "Priority Indicators" the code I have is;
Priority Indicator
For my JavaScript code see below;
JavaScript Code
I want the Priority Indicators to show;
Red indicator shows if due date within a week
Yellow indicator shows if due date within 2 weeks
Green indicator shows if due date within 3+ weeks.

Answer 1

Lookup column won't refresh automatically so I suggest you use CSR for this requirement.
Insert script editor webpart into your list view webpart page and insert below script into script editor webpart.
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
(function () {
// Create object that have the context information about the field that we want to change it's output render
var priorityFiledContext = {};
priorityFiledContext.Templates = {};
priorityFiledContext.Templates.Fields = {
// Apply the new rendering for Priority field on List View
"Priority_x0020_Indicators": { "View": priorityFiledTemplate }
};
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(priorityFiledContext);
})();
// This function provides the rendering logic for list view
function priorityFiledTemplate(ctx) {
// get today's date
var today = new Date();
// zero out the time portion so we will only compare days
today.setHours(0, 0, 0, 0);
// get the date set in your date YourDateField
var itemDate = new Date(ctx.CurrentItem["Due_x0020_Date"]);
// zero out the time portion so we only compare days
itemDate.setHours(0, 0, 0, 0);
// Return html element with appropriate color based on priority value
var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
var diffDays = Math.round(Math.abs((itemDate.getTime() - today.getTime()) / (oneDay)));
if (diffDays < 7) {
return "<span style='color:red'>•</span>";
} else if (diffDays < 14) {
return "<span style='color:yellow'>•</span>";
} else {
return "<span style='color:green'>•</span>";
}
}
</script>
Check field static name by developer tool(in list new/edit form).