I try to get name and date from dropdown and pass to the api point like parameters:
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" id="clicked" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Име на станция:
</a>
<ul class="dropdown-menu" id="clickedNames">
</ul>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="clicked2" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Дата за прогноза:
</a>
<ul class="dropdown-menu" id="clickedDates">
</ul>
</li>
</ul>
With this function I create a chart:
async function mike11Chart() {
await getMike11Data()
//Create second chart
const ctx2 = document.getElementById('mike11chart');
new Chart(ctx2, {
type: 'line',
data: {
labels: mike11LabelChart,
datasets: [{
type: 'line',
label: 'Метра',
data: mike11DataChart,
borderWidth: 1,
}]
},
options: {
scales: {
y: {
type: 'linear',
}
}
}
})
};
I create this function to get clicked name and date and pass like a parameter:
//Create a function who will give clicked values like a parameter on API
async function getMike11Data() {
document.querySelector('#clickedNames').addEventListener('click', showNames)
document.querySelector('#clickedDates').addEventListener('click', showNames)
let currFlag = true
let count = 0;
async function showNames(e) {
if (currFlag) {
dataAPI.nameStation = e.target.innerHTML.replace(/.*+s?/, '');
currFlag = false;
} else {
dataAPI.dateStation = e.target.innerHTML;
}
count++;
if (count != 1) {
const formatDate = "YYYY-MM-DD HH:mm:ss"
const apiUrl = "http://194.141.118.43:3010/mike11?id="+dataAPI.nameStation+"&id2="+moment(dataAPI.dateStation).format(formatDate);
const response = await fetch(apiUrl)
const mike11data = await response.json()
const mike11date = mike11data.floodguard_mike11.rows.map((x) => x.date)
//console.log(mike11date)
const mike11value = mike11data.floodguard_mike11.rows.map((x) => x.level)
//console.log(mike11value)
mike11LabelChart = mike11date;
mike11DataChart = mike11value;
//debugger;
}
}
}
const apiUrl come with correct url path and data coming, but chart cannot displaying.
apiUrl
Response come with full data with date and values:
When I remove showNames() function and paste static url addres on apiUrl which I have copied when debugging from the variable itself everythink is ok and chart is showing.
Like this:
//Create a function who will give clicked values like a parameter on API
async function getMike11Data() {
const formatDate = "YYYY-MM-DD HH:mm:ss"
const apiUrl = "http://194.141.118.43:3010/mike11?id=Maritsa%20-%20132543%20-%20HPoint-Water%20level&id2=2023-01-23%2014:00:00"
const response = await fetch(apiUrl)
const mike11data = await response.json()
const mike11date = mike11data.floodguard_mike11.rows.map((x) => x.date)
//console.log(mike11date)
const mike11value = mike11data.floodguard_mike11.rows.map((x) => x.level)
//console.log(mike11value)
mike11LabelChart = mike11date;
mike11DataChart = mike11value;
}
When I use hardcoded url address the chart is showing.
How can I otherwise get the clicked name and date and put them in the function getMike11Data();
