Fix chart sizing issues
Showing
1 changed file
with
26 additions
and
9 deletions
... | @@ -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 ♥ with Socket.io & Chart.js</p> | 123 | <p>Made with ♥ 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) { | ... | ... |
-
Please register or sign in to post a comment