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 26 additions and 9 deletions
index.html
...@@ -29,8 +29,8 @@ ...@@ -29,8 +29,8 @@
29 } 29 }
30 30
31 canvas { 31 canvas {
32 width: 100%; 32 width: 400px;
33 height: 100%; 33 height: 100px;
34 } 34 }
35 35
36 .active { 36 .active {
...@@ -48,6 +48,11 @@ ...@@ -48,6 +48,11 @@
48 height: 100px; 48 height: 100px;
49 } 49 }
50 50
51 .chart-container {
52 width: 400px;
53 height: 100px;
54 }
55
51 .footer { 56 .footer {
52 position: fixed; 57 position: fixed;
53 margin: auto; 58 margin: auto;
...@@ -63,7 +68,7 @@ ...@@ -63,7 +68,7 @@
63 </style> 68 </style>
64 </head> 69 </head>
65 <body> 70 <body>
66 <div style="width: 400px; margin: auto"> 71 <div style="width: 600px; margin: auto">
67 <div class="header"> 72 <div class="header">
68 <span><b>Express Status</b></span> 73 <span><b>Express Status</b></span>
69 <div id="span-controls" class="span-controls"> 74 <div id="span-controls" class="span-controls">
...@@ -74,35 +79,45 @@ ...@@ -74,35 +79,45 @@
74 <h5>CPU Usage</h5> 79 <h5>CPU Usage</h5>
75 <h1 id="cpuStat">- %</h1> 80 <h1 id="cpuStat">- %</h1>
76 </div> 81 </div>
77 <canvas id="cpuChart" width="400" height="100"></canvas> 82 <div class="chart-container">
83 <canvas id="cpuChart" width="400" height="100"></canvas>
84 </div>
78 </div> 85 </div>
79 <div class="container"> 86 <div class="container">
80 <div class="stats-column"> 87 <div class="stats-column">
81 <h5>Memory Usage</h5> 88 <h5>Memory Usage</h5>
82 <h1 id="memStat">- %</h1> 89 <h1 id="memStat">- %</h1>
83 </div> 90 </div>
84 <canvas id="memChart" width="400" height="100"></canvas> 91 <div class="chart-container">
92 <canvas id="memChart" width="200" height="100"></canvas>
93 </div>
85 </div> 94 </div>
86 <div class="container"> 95 <div class="container">
87 <div class="stats-column"> 96 <div class="stats-column">
88 <h5>One Minute Load Avg</h5> 97 <h5>One Minute Load Avg</h5>
89 <h1 id="loadStat">-</h1> 98 <h1 id="loadStat">-</h1>
90 </div> 99 </div>
91 <canvas id="loadChart" width="400" height="100"></canvas> 100 <div class="chart-container">
101 <canvas id="loadChart" width="200" height="100"></canvas>
102 </div>
92 </div> 103 </div>
93 <div class="container"> 104 <div class="container">
94 <div class="stats-column"> 105 <div class="stats-column">
95 <h5>Response Time</h5> 106 <h5>Response Time</h5>
96 <h1 id="responseTimeStat">-</h1> 107 <h1 id="responseTimeStat">-</h1>
97 </div> 108 </div>
98 <canvas id="responseTimeChart" width="400" height="100"></canvas> 109 <div class="chart-container">
110 <canvas id="responseTimeChart" width="200" height="100"></canvas>
111 </div>
99 </div> 112 </div>
100 <div class="container"> 113 <div class="container">
101 <div class="stats-column"> 114 <div class="stats-column">
102 <h5>Requests per Second</h5> 115 <h5>Requests per Second</h5>
103 <h1 id="rpsStat">-</h1> 116 <h1 id="rpsStat">-</h1>
104 </div> 117 </div>
105 <canvas id="rpsChart" width="400" height="100"></canvas> 118 <div class="chart-container">
119 <canvas id="rpsChart" width="200" height="100"></canvas>
120 </div>
106 </div> 121 </div>
107 <div class="footer"> 122 <div class="footer">
108 <p>Made with &#9829; with Socket.io & Chart.js</p> 123 <p>Made with &#9829; with Socket.io & Chart.js</p>
...@@ -145,7 +160,9 @@ ...@@ -145,7 +160,9 @@
145 }, 160 },
146 tooltips: { 161 tooltips: {
147 enabled: false 162 enabled: false
148 } 163 },
164 responsive: true,
165 maintainAspectRatio: false
149 }; 166 };
150 167
151 var createChart = function (ctx, dataset) { 168 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!