In a work spaces i have a charts from different script report
and this is HTML code
<body>
<div class="button-container">
<button class="button button--animated" id="groupByDocTypeButton"
onclick='
const registeredChart = document.querySelector("div[chart_name=\"Registered New Cases\"]");
const completedChart = document.querySelector("div[chart_name=\"Completed Job\"]");
const anotherChart = document.querySelector("div[chart_name=\"Completed Job Group By DocType\"]");
const RegisterChartGroupBy = document.querySelector("div[chart_name=\"Register New Cases Group By DocType\"]");
// Toggle Registered New Cases chart
if (registeredChart && registeredChart.parentElement && registeredChart.parentElement.parentElement) {
registeredChart.parentElement.parentElement.style.display =
(registeredChart.parentElement.parentElement.style.display === "none" ||
registeredChart.parentElement.parentElement.style.display === "") ?
"block" : "none";
}
// Toggle Completed Job chart
if (completedChart && completedChart.parentElement && completedChart.parentElement.parentElement) {
const isCompletedVisible = completedChart.parentElement.parentElement.style.display === "block";
completedChart.parentElement.parentElement.style.display = isCompletedVisible ? "none" : "block";
}
// Display "Another Chart" only when "Completed Job" is not visible
if (completedChart && completedChart.parentElement && completedChart.parentElement.parentElement) {
const isCompletedVisible = completedChart.parentElement.parentElement.style.display === "block";
if (!isCompletedVisible && anotherChart && anotherChart.parentElement && anotherChart.parentElement.parentElement) {
anotherChart.parentElement.parentElement.style.display = "block";
} else if (anotherChart) {
anotherChart.parentElement.parentElement.style.display = "none";
}
}
// Toggle RegisterChartGroupBy only when registeredChart is not visible
if (RegisterChartGroupBy && RegisterChartGroupBy.parentElement && RegisterChartGroupBy.parentElement.parentElement) {
const isRegisteredVisible = registeredChart.parentElement.parentElement.style.display === "block";
if (!isRegisteredVisible) {
RegisterChartGroupBy.parentElement.parentElement.style.display = "block";
} else {
RegisterChartGroupBy.parentElement.parentElement.style.display = "none";
}
}
'>
<span class="button__text">Hide Chart Grandparent</span>
<span class="button__icon">→</span>
</button>
</div>
<div class="filter-container">
<label for="start-date">Start Date:</label>
<input type="date" id="start-date">
<label for="end-date">End Date:</label>
<input type="date" id="end-date">
<label for="timeInterval">Time Interval:</label>
<select id="timeInterval">
<option value="">Select...</option>
<option value="lastYear">Last Year</option>
<option value="lastQuarter">Last Quarter</option>
<option value="lastWeek">Last Week</option>
<option value="lastMonth">Last Month</option>
</select>
<label for="timeSpan">Time Span:</label>
<select id="timeSpan">
<option value="">Select...</option>
<option value="yearly">Yearly</option>
<option value="quarterly">Quarterly</option>
<option value="monthly">Monthly</option>
<option value="weekly">Weekly</option>
<option value="daily">Daily</option>
</select>
<button id="filterButton">
Apply Filter</button>
</div>
JS code
root_element.querySelector('#filterButton').addEventListener('click', function() {
const from_date = root_element.querySelector('#start-date').value;
const to_date = root_element.querySelector('#end-date').value;
if (from_date && to_date) {
console.log("Start Date: ", from_date);
console.log("End Date: ", to_date);
window.location.href = `/app/query-report/Register%20New%20Cases?from_date=${from_date}&to_date=${to_date}`
}
})
I want to apply filter for all charts one time