TimberVis Flexiboard: Visualization and Exploration Flexiboard for Timber Buildings IoT data sensors.
The pulse of the wood
Monitoring of Wooden houses: Time series of sensors data measuring
humidity, temperatures, vibrations and weather conditions.
https://lnu.se/forskning/forskningsprojekt/projekt-flexiboard-for-visualisering-och-utforskning-av-trabyggnader/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.6 KiB
61 lines
1.6 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Click to Add Bar Chart</title>
|
|
<style>
|
|
.chart-container {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 300px;
|
|
}
|
|
.bar {
|
|
width: 30px;
|
|
margin: 0 5px;
|
|
background-color: blue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<button id="addButton">Add Bar Chart</button>
|
|
<div id="chartContainer" class="chart-container"></div>
|
|
|
|
<script src="script.js"></script>
|
|
|
|
<script>
|
|
|
|
// Function to create the bar chart based on data
|
|
function createBarChart(data) {
|
|
const chartContainer = document.getElementById('chartContainer');
|
|
chartContainer.innerHTML = ''; // Clear the container before adding new bars
|
|
|
|
for (const value of data) {
|
|
const bar = document.createElement('div');
|
|
bar.className = 'bar';
|
|
bar.style.height = value + 'px'; // Set the bar height based on data
|
|
chartContainer.appendChild(bar);
|
|
}
|
|
}
|
|
|
|
// Function to generate random data for the bar chart (for demonstration purposes)
|
|
function generateRandomData(numBars, maxHeight) {
|
|
const data = [];
|
|
for (let i = 0; i < numBars; i++) {
|
|
data.push(Math.floor(Math.random() * maxHeight) + 1);
|
|
}
|
|
return data;
|
|
}
|
|
|
|
// Add a click event listener to the button
|
|
const addButton = document.getElementById('addButton');
|
|
addButton.addEventListener('click', function () {
|
|
const numBars = 5; // Number of bars in the chart
|
|
const maxHeight = 200; // Maximum height of the bars
|
|
const data = generateRandomData(numBars, maxHeight);
|
|
createBarChart(data);
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|
|
|