Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Google Charts library error correction and a loading text #2

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Google Charts library error correction and a loading text #2

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
43153a1
Some sugested changes
Quantium Oct 8, 2024
876018c
Changing the initial loading of the data
Quantium Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 20 additions & 2 deletions indexSalaries.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,29 @@
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// NOTE: I've commented this function because cause an error due to the drawChart's parameter is not defined
//google.charts.setOnLoadCallback(drawChart);

// get data from url
let data = null;
let url = "https://pollysnips.s3.amazonaws.com/bostonEmployeeSalaries.json"
fetch(url).then((response) => response.json())
.then(json => {
/**
---------------------------------------------------------------------------------------------
NOTE: I've added the following lines to enable the analyzeData button once the data is loaded
Also, I've added a loading message that hiddes once the data is loaded
---------------------------------------------------------------------------------------------
**/
analyzeData_btn = document.getElementById("analyzeData_btn")
loading_msg = document.getElementById("loading_msg")
loading_msg.hidden = true;
analyzeData_btn.disabled = false;
/** End of the added lines **/

data = json;
// I've added this line to call the analyzeData function once the data is loaded
analyzeData()
//writeData(JSON.stringify(data.data[0]));
})
.catch(error => {
Expand All @@ -39,9 +54,12 @@
</script>
<body>
<h1>Boston City Valued Workers</h1>
<!-- NOTE: I've added a loading message that hiddes once the data is loaded -->
<h2 id="loading_msg"><blink>Loading Data</blink></h2>
<label>Enter Cutoff Salary</label>
<input id= "input" type = "number" value="300000">
<button onclick="analyzeData()" >Analyze Boston Data</button>
<!-- NOTE: I've added the disabled attribute to the button to prevent the user from clicking it before the data is loaded -->
<button onclick="analyzeData()" disabled id="analyzeData_btn">Analyze Boston Data</button>
<div id="data">
</div>
<div id = "chart">
Expand Down