Skip to content

Instantly share code, notes, and snippets.

@RF5

RF5/graph_display.html Secret

Created June 19, 2021 18:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save RF5/3590dc69478c8f381c201c56b047b5ae to your computer and use it in GitHub Desktop.
Save RF5/3590dc69478c8f381c201c56b047b5ae to your computer and use it in GitHub Desktop.
Download ZIP
Raw
graph_display.html
<!DOCTYPE html>
<html lang="en" style="height: 100%;">
<head>
<meta charset="UTF-8"/>
<title>Quequeque</title>
<script src="https://cdn.jsdelivr.net/npm/journey-iframe-client@0.2.0/dist/bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.4/dist/Chart.bundle.min.js"></script>
<meta name="generator" content="MediaWiki 1.36.0-wmf.5"/>
<meta name="referrer" content="origin"/>
<meta name="referrer" content="origin-when-crossorigin"/>
<meta name="referrer" content="origin-when-cross-origin"/>
<meta name="theme-color" content="#eaecf0"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, minimum-scale=0.25, maximum-scale=5.0"/>
</head>
<body style="height: 100%;">
<style type="text/css">
.container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
}
.chart-container {
position: relative;
margin: auto;
height: auto;
width: max(400px, 30vw);
}
</style>
<h3 id="statusind" style="font-family: monospace;"> waiting for setup </h3>
<div class="container">
<div class="chart-container"><canvas id="co2-chart"></canvas></div>
<div class="chart-container"><canvas id="eco2-chart"></canvas></div>
<div class="chart-container"><canvas id="tvoc-chart"></canvas></div>
<div class="chart-container"><canvas id="temp-chart"></canvas></div>
<div class="chart-container"><canvas id="pressure-chart"></canvas></div>
<div class="chart-container"><canvas id="humidity-chart"></canvas></div>
<div class="chart-container" style="height: 300px;"><canvas id="pm-chart"></canvas></div>
<div class="chart-container"><canvas id="pg03-chart"></canvas></div>
<div class="chart-container"><canvas id="pg05-chart"></canvas></div>
<div class="chart-container"><canvas id="pg1-chart"></canvas></div>
<div class="chart-container"><canvas id="pg025-chart"></canvas></div>
<div class="chart-container"><canvas id="pg10-chart"></canvas></div>
</div>
<script>
let client = new JourneyIFrameClient();
function ready() {
client.post('init').then(function(msg) {
let clss = document.getElementById('statusind');
if(msg == "success") {
clss.innerHTML = msg;
clss.remove();
}
});
client.on('make-graph', function(config, canvas_id, canvas_style) {
// Value returned here will be sent to the JourneyApps Container
let ctx = document.getElementById(canvas_id);
// ctx.setAttribute('height', canvas_style['height']);
var chort = new Chart(ctx, config)
});
};
document.addEventListener("DOMContentLoaded", ready);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment