distributed.camp
A Python port of the Invisible Internet Project (I2P)
1{% extends "base.html" %}
2{% block title %}Graphs{% endblock %}
3{% block content %}
4<h1>Graphs</h1>
5<div class="card">
6 <h3>Bandwidth</h3>
7 <div id="chart-bandwidth" style="height: 300px;"></div>
8</div>
9<div class="card">
10 <h3>Tunnels</h3>
11 <div id="chart-tunnels" style="height: 300px;"></div>
12</div>
13<script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script>
14<script>
15async function loadChart(elementId, statName, title) {
16 try {
17 const resp = await fetch(`/graphs/data/${statName}`);
18 const data = await resp.json();
19 Plotly.newPlot(elementId, [{
20 x: data.labels,
21 y: data.values,
22 type: 'scatter',
23 mode: 'lines',
24 name: title
25 }], {
26 margin: {t: 30, r: 30, b: 40, l: 50},
27 xaxis: {title: 'Time'},
28 yaxis: {title: title}
29 });
30 } catch(e) {
31 document.getElementById(elementId).textContent = 'No data available';
32 }
33}
34loadChart('chart-bandwidth', 'bandwidth.in', 'Bandwidth In (B/s)');
35loadChart('chart-tunnels', 'tunnels.participating', 'Participating Tunnels');
36</script>
37{% endblock %}