Utilization Bar Chart

The Utilization Bar Chart depicts the percentage utilization ratio between used and available.

Utilization Bar Chart Example

Utilization Bar Chart Example

Utilization Bar Chart

#callout-1

  1. Chart Fill: - The fill color depends on the thresholds. - When no thresholds exist the indicator is blue (#0088ce). - When a threshold exists and the percentage has not surpassed any thresholds, the indicator is green (#3f9c35). - When the utilization percentage has surpassed the warning threshold, but not the error threshold, the indicator is orange (#ec7a08). - When the utilization percentage has surpassed the error threshold, the indicator is is red (#cc0000).

  2. Background Fill: The background color is grey (#d1d1d1).

  3. Tooltip: It is recommend that the percentage is displayed on hover.

  4. Warning Threshold Indicator (optional): If a warning threshold exists, that may be visually indicated on the chart. 75% is the typical default value for a warning threshold but some products may have configurable thresholds (design not currently shown, visuals are still TBD).

  5. Error Threshold Indicator (optional): If an error threshold exists, that may be visually indicated on the chart. 90% is the typical default value for an error threshold but some products may have configurable thresholds (design not currently shown, visuals are still TBD).

Utilization Bar Chart

25% Used
75% Available

Reference Markup

<script src="components/c3/c3.min.js"></script>
<script src="components/d3/d3.min.js"></script>
<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" style="width: 25%;" data-toggle="tooltip" title="25% Used">
    <span class="sr-only">25% Used</span>
  </div>
  <div class="progress-bar progress-bar-remaining" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%;" data-toggle="tooltip" title="75% Available">
    <span class="sr-only">75% Available</span>
  </div>
</div>
<script>
  // Initialize Tooltip
  jQuery(document).ready(function() {
    jQuery('[data-toggle="tooltip"]').tooltip();
  });
</script>