<div class="container">
  <div class="row">
    <div class="col-sm">
      <canvas id="guage-1" width="200" height="200"></canvas>
    </div>
    <div class="col-sm">
      <canvas id="guage-2" width="200" height="200"></canvas>
    </div>
    <div class="col-sm">
      <canvas id="guage-3" width="200" height="200"></canvas>
    </div>
    <div class="col-sm">
      <p class="guage-text">190</p>
    </div>
  </div>
</div>
<script>
RenderGuage("guage-1", "Active users", 45);
RenderGuage("guage-2", "Active clients", 25, 100, window.chartjs_purple);
RenderGuage("guage-3", "Active servers", 85, 100, window.chartjs_green);
</script>

<div class="container mb-5">
  <div class="row">
    <div class="col-sm">
      <canvas id="guage-4" width="900" height="400"></canvas>
    </div>
  </div>
</div>
<script>
RenderHorizBarChart("guage-4", "Example Bar Chart", ["Test", "Example", "Data", "Hello"], [5, 15, 2, 10]);
</script>

<div class="container mb-5">
  <div class="row">
    <div class="col-sm">
      <canvas id="guage-5" width="900" height="400"></canvas>
    </div>
  </div>
</div>
<script>
RenderBarChart("guage-5", "Example Bar Chart", ["Test", "Example", "Data", "Hello"], [5, 15, 2, 10], window.chartjs_green);
</script>