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.
48 lines
1.3 KiB
48 lines
1.3 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Horizon Chart Example with Plotly</title>
|
|
<!-- Include the Plotly library -->
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<!-- Create a container for the chart -->
|
|
<div id="horizon-chart"></div>
|
|
|
|
<script>
|
|
// Function to create a Horizon chart
|
|
function createHorizonChart(dates, values, myid, title) {
|
|
// Create a trace for the Horizon chart
|
|
const trace = {
|
|
x: dates.map(date => new Date(date)),
|
|
y: values,
|
|
type: 'scatter',
|
|
mode: 'lines',
|
|
fill: 'tozeroy',
|
|
name: title,
|
|
hoverinfo: 'x+y',
|
|
};
|
|
|
|
// Create a layout for the chart
|
|
const layout = {
|
|
title: title,
|
|
};
|
|
|
|
// Plot the chart inside the specified div (myid)
|
|
Plotly.newPlot(myid, [trace], layout);
|
|
}
|
|
|
|
// Example data
|
|
const exampleDates = [
|
|
"2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04", "2023-01-05",
|
|
"2023-01-06", "2023-01-07", "2023-01-08", "2023-01-09", "2023-01-10"
|
|
];
|
|
|
|
const exampleValues = [0.1, 0.3, 0.5, 0.4, 0.2, -0.1, -0.3, -0.4, -0.2, -0.1];
|
|
const chartTitle = "Example Horizon Chart";
|
|
|
|
// Call the function to create the Horizon chart
|
|
createHorizonChart(exampleDates, exampleValues, 'horizon-chart', chartTitle);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|