Skip to content

Jabis Sev贸n / esm

Go to a project
Toggle navigation
Toggle navigation pinning
45a74809 by Rafal Wilinski
Options

:battery:Fix chart sizing issues

1 parent d5dcbe7f
Inline Side-by-side
Showing 1 changed file with 25 additions and 8 deletions
index.html
......@@ -29,8 +29,8 @@
}
canvas {
width: 100%;
height: 100%;
width: 400px;
height: 100px;
}
.active {
......@@ -48,6 +48,11 @@
height: 100px;
}
.chart-container {
width: 400px;
height: 100px;
}
.footer {
position: fixed;
margin: auto;
......@@ -63,7 +68,7 @@
</style>
</head>
<body>
<div style="width: 400px; margin: auto">
<div style="width: 600px; margin: auto">
<div class="header">
<span><b>Express Status</b></span>
<div id="span-controls" class="span-controls">
......@@ -74,35 +79,45 @@
<h5>CPU Usage</h5>
<h1 id="cpuStat">- %</h1>
</div>
<div class="chart-container">
<canvas id="cpuChart" width="400" height="100"></canvas>
</div>
</div>
<div class="container">
<div class="stats-column">
<h5>Memory Usage</h5>
<h1 id="memStat">- %</h1>
</div>
<canvas id="memChart" width="400" height="100"></canvas>
<div class="chart-container">
<canvas id="memChart" width="200" height="100"></canvas>
</div>
</div>
<div class="container">
<div class="stats-column">
<h5>One Minute Load Avg</h5>
<h1 id="loadStat">-</h1>
</div>
<canvas id="loadChart" width="400" height="100"></canvas>
<div class="chart-container">
<canvas id="loadChart" width="200" height="100"></canvas>
</div>
</div>
<div class="container">
<div class="stats-column">
<h5>Response Time</h5>
<h1 id="responseTimeStat">-</h1>
</div>
<canvas id="responseTimeChart" width="400" height="100"></canvas>
<div class="chart-container">
<canvas id="responseTimeChart" width="200" height="100"></canvas>
</div>
</div>
<div class="container">
<div class="stats-column">
<h5>Requests per Second</h5>
<h1 id="rpsStat">-</h1>
</div>
<canvas id="rpsChart" width="400" height="100"></canvas>
<div class="chart-container">
<canvas id="rpsChart" width="200" height="100"></canvas>
</div>
</div>
<div class="footer">
<p>Made with &#9829; with Socket.io & Chart.js</p>
......@@ -145,7 +160,9 @@
},
tooltips: {
enabled: false
}
},
responsive: true,
maintainAspectRatio: false
};
var createChart = function (ctx, dataset) {
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!