patternfly/tests/pages/_includes/widgets/charts/donut-utilization.html

This reference implementation of PatternFly is based on [Bootstrap v3](http://getbootstrap.com/). Think of PatternFly as a "skinned" version of Bootstrap with additional components and customizations.

<div id="{{include.id}}1" class="example-donut-chart-utilization"></div>

<div class="pct-donut-chart-pf example-donut-chart-utilization">
  <div class="pct-donut-chart-pf-chart">
    <div id="{{include.id}}2"></div>
  </div>
  <span class="pct-donut-chart-pf-label">
    60 MHz of 100 MHz used
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-left">
    <div class="pct-donut-chart-pf-chart">
      <div id="{{include.id}}3"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-right">
      60 MHz of 100 MHz used
    </span>
  </span>
</div>

<div class="example-donut-chart-utilization">
  <span class="pct-donut-chart-pf pct-donut-chart-pf-right">
    <div class="pct-donut-chart-pf-chart">
      <div id="{{include.id}}4"></div>
    </div>
    <span class="pct-donut-chart-pf-label text-left">
      60 MHz of 100 MHz
    </span>
  </span>
</div>

<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  // Donut configuration 1
  var donutConfig1 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig1.bindto = '#{{include.id}}1';
  donutConfig1.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40],
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig1.size = {
    width: 180,
    height: 180
  };

  donutConfig1.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig1);
  $().pfSetDonutChartTitle("#{{include.id}}1", "60", "MHz Used");

  // Donut configuration 2
  var donutConfig2 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig2.bindto = '#{{include.id}}2';
  donutConfig2.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig2.size = {
    width: 180,
    height: 180
  };

  donutConfig2.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig2);
  $().pfSetDonutChartTitle("#{{include.id}}2", "60", "MHz Used");

  // Donut configuration 3
  var donutConfig3 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig3.bindto = '#{{include.id}}3';
  donutConfig3.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig3.size = {
    width: 140,
    height: 140
  };

  donutConfig3.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig3);
  $().pfSetDonutChartTitle("#{{include.id}}3", "60", "MHz Used");

  // Donut configuration 4
  var donutConfig4 = c3ChartDefaults.getDefaultDonutConfig('A');

  donutConfig4.bindto = '#{{include.id}}4';
  donutConfig4.data = {
    type: "donut",
    columns: [
      ["Used", 60],
      ["Available", 40]
    ],
    groups: [
      ["used", "available"]
    ],
    order: null
  };
  donutConfig4.size = {
    width: 140,
    height: 140
  };

  donutConfig4.tooltip = {
    contents: $().pfGetUtilizationDonutTooltipContentsFn('MHz')
  };

  c3.generate(donutConfig4);
  $().pfSetDonutChartTitle("#{{include.id}}4", "60", "MHz Used");
</script>