patternfly/tests/pages/_includes/widgets/charts/donut-whole-relationship.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.id1}}" class="example-donut-chart"></div>
<div id="{{include.id2}}" class="example-donut-chart-right-legend"></div>
<div id="{{include.id3}}" class="example-donut-chart-bottom-legend"></div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  var donutData = {
    type : 'donut',
    colors: {
      Cats: $.pfPaletteColors.blue,
      Hamsters: $.pfPaletteColors.green,
      Fish: $.pfPaletteColors.orange,
      Dogs: $.pfPaletteColors.red
    },
    columns: [
      ['Dogs', 2],
      ['Cats', 2],
      ['Fish', 3],
      ['Hamsters', 1]
    ],
    onclick: function (d, i) { console.log("onclick", d, i); },
    onmouseover: function (d, i) { console.log("onmouseover", d, i); },
    onmouseout: function (d, i) { console.log("onmouseout", d, i); }
  };

  // Donut Chart without Legend
  var donutChartConfig = c3ChartDefaults.getDefaultDonutConfig();
  donutChartConfig.bindto = '#{{include.id1}}';
  donutChartConfig.tooltip = {show: true};
  donutChartConfig.data = donutData;
  donutChartConfig.size = {
    width: 200,
    height: 171
  };
  donutChartConfig.tooltip = {
    contents: $().pfDonutTooltipContents
  };

  var donutChartNoLegend = c3.generate(donutChartConfig);
  $().pfSetDonutChartTitle("#{{include.id1}}", "8", "Animals");

  // Right Legend
  var donutChartRightConfig = c3ChartDefaults.getDefaultDonutConfig();
  donutChartRightConfig.bindto = '#{{include.id2}}';
  donutChartRightConfig.tooltip = {show: true};
  donutChartRightConfig.data = donutData;
  donutChartRightConfig.legend = {
    show: true,
    position: 'right'
  };
  donutChartRightConfig.size = {
    width: 251,
    height: 161
  };
  donutChartRightConfig.tooltip = {
    contents: $().pfDonutTooltipContents
  };

  var donutChartRightLegend = c3.generate(donutChartRightConfig);
  $().pfSetDonutChartTitle("#{{include.id2}}", "8", "Animals");

  // Donut Chart Bottom Legend
  var donutChartBottomConfig = c3ChartDefaults.getDefaultDonutConfig();
  donutChartBottomConfig.bindto = '#{{include.id3}}';
  donutChartBottomConfig.tooltip = {show: true};
  donutChartBottomConfig.data = donutData;
  donutChartBottomConfig.legend = {
    show: true,
    position: 'bottom'
  };
  donutChartBottomConfig.size = {
    width: 271,
    height: 191
  };
  donutChartBottomConfig.tooltip = {
    contents: $().pfDonutTooltipContents
  };

  var donutChartBottomLegend = c3.generate(donutChartBottomConfig);
  $().pfSetDonutChartTitle("#{{include.id3}}", "8", "Animals");
</script>