I am working on a Javascript project that involves fetching Covid-19 data from an API source. The user inputs the name of the country they are interested in, and the data is then displayed as a graph using chart.js. I have set up an event listener on the input field to retrieve the data when the user enters the country. However, when I call the function to display the graph ( graphIt() ), it only appears for a second and then disappears. I understand that this happens because the function is called only once and executes quickly. How can I make sure the chart stays visible for as long as I want? Here is the important part of my code!
index.html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.min.js"></script>
<script src="{% static 'viewCasesChart/index.js' %}"></script>
<div id="banner">
<div id="banner_details">
<h2>CoData</h2>
</div>
</div>
<div id="one_line">
<div id="main_title">
<h1>Covid-19 Data</h1>
</div>
<div id="user_query_data">
<form id="country_form">
<input type="text" placeholder="Country" id="country">
<input type="submit" value="Search">
</form>
</div>
</div>
<div id="confirmed_graph">
<canvas id="myChart" height="500" width="300"></canvas>
</div>
index.js
document.addEventListener('DOMContentLoaded', () => {
//declare global variable and assign default value
var country = "Italy";
document.getElementById('country_form').addEventListener('submit', () => {
var delayInMilliseconds = 100000; //
country = document.getElementById('country').value;
console.log("test 1", country);
graphit();
})
async function graphit() {
document.getElementById('myChart').style.display = "block";
const dataset = await dataToGraph();
console.log("dataset.xs", dataset.xs);
console.log("dataset.ys", dataset.ys);
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'line',
data: {
labels: dataset.xs,
datasets: [{
label: `Covid 19 Confirmed cases in ${country}`,
data: dataset.ys,
backgroundColor: ['rgba(255, 99, 132, 0.2)'],
borderColor: ['rgba(255, 99, 132, 1)'],
borderWidth: 1,
fill: false,
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Confirmed Cases'
}
}],
xAxes: [{
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
}
}
});
};
async function dataToGraph() {
const xs = [];
const ys = [];
var today = new Date();
var dd = String(today.getDate()).padStart(2, '0');
var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
var yyyy = today.getFullYear();
today = yyyy + '-' + mm + '-' + dd;
console.log("test 2", country);
fetch(`https://webhooks.mongodb-stitch.com/api/client/v2.0/app/covid-19-qppza/service/REST-API/incoming_webhook/countries_summary?country=${country}&min_date=2020-04-22&max_date=${today}`)
.then(response => response.json())
.then(days => {
days.forEach(day => {
ys.push(day.confirmed);
xs.push(day.date);
})
})
console.log("xs", xs);
console.log("ys", ys);
console.log(`https://webhooks.mongodb-stitch.com/api/client/v2.0/app/covid-19-qppza/service/REST-API/incoming_webhook/countries_summary?country=${country}&min_date=2020-04-22&max_date=${today}`);
return { xs, ys };
};
}); // Edit: final closing brackets were missing