I have been working on coding some gauges for the index page of the R/Shiny dashboards used by our company. The layout consists of several styled divs that link to different R apps.
Recently, our executives have shown interest in having fuel-gauge style graphs at the top of the page to represent $income and $goals for each division throughout the month.
To create the Gauges, I opted to utilize the JustGage plugin from JustGage. With a simple script provided by my supervisor to extract data from csv files and convert it into JSON documents on the server, we were able to generate a JSON file with just 6 lines.
Using an AJAX XMLHttpRequest seemed to work well initially. However, when attempting to store the parsed data into a variable and reference it within my Gauge parameters, I encountered the following error:
(index):182 Uncaught ReferenceError: feeData is not defined at (index):182 (anonymous) @ (index):182
This error occurs specifically on the first instance where the variable holding the JSON data is referenced.
Any assistance or guidance on this issue would be greatly appreciated!
< script >
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
var feeData = JSON.parse(this.responseText);
if (this.readyState == 4 && this.status == 200) {
var feeData = JSON.parse(this.responseText);
}
};
xhttp.open("GET", "test.json", true);
xhttp.send();
var g = new JustGage({
titleFontColor: "black",
labelFontColor: "black",
id: "DEF",
value: feeData.DEFCurrent,
pointer: true,
min: 0,
max: feeData.DEFGoal,
title: "DEF"
});
var g = new JustGage({
titleFontColor: "black",
labelFontColor: "black",
id: "EBO",
value: feeData.EBOCurrent,
pointer: true,
min: 0,
max: feeData.EBOGoal,
title: "EBO"
});
var g = new JustGage({
titleFontColor: "black",
labelFontColor: "black",
id: "Company",
value: (feeData.EBOCurrent + feeData.DEFCurrent),
pointer: true,
min: 0,
max: (feeData.EBOGoal + feeData.DEFGoal),
title: "Company"
});
var g = new JustGage({
titleFontColor: "black",
labelFontColor: "black",
id: "Legal",
value: feeData.LegalCurrent,
pointer: true,
min: 0,
max: feeData.LegalGoal,
title: "Legal"
});
</script>Below is the contents of the JSON file:
{"EBOGoal":1000,"EBOCurrent":900,"DEFGoal":2000,"DEFCurrent":1500,"LegalGoal":500,"LegalCurrent":450}
It's worth noting that the Gauges themselves function correctly when placeholder numerical values are substituted for the MAX and VALUE parameters in the JavaScript code for the Gauges.