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

  var pieData = {
    type : 'pie',
    colors: {
      Dogs: $.pfPaletteColors.red,
      Cats: $.pfPaletteColors.blue,
      Fish: $.pfPaletteColors.orange,
      Hamsters: $.pfPaletteColors.green
    },
    columns: [
      ['Dogs', 3],
      ['Cats', 2],
      ['Fish', 10],
      ['Hamsters', 2]
    ],
    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); }
  };

  // Pie Chart without Legend
  var pieChartConfig = c3ChartDefaults.getDefaultPieConfig();
  pieChartConfig.bindto = '#{{ include.id1 }}';
  pieChartConfig.data = pieData;
  pieChartConfig.size = {
    width: 200,
    height: 171
  };
  var pieChartNoLegend = c3.generate(pieChartConfig);

  // Right Legend
  var pieChartRightConfig = c3ChartDefaults.getDefaultPieConfig();
  pieChartRightConfig.bindto = '#{{include.id2}}';
  pieChartRightConfig.data = pieData;
  pieChartRightConfig.legend = {
    show: true,
    position: 'right'
  };
  pieChartRightConfig.size = {
    width: 251,
    height: 161
  };
  var pieChartRightLegend = c3.generate(pieChartRightConfig);

  // Pie Chart Bottom Legend
  var pieChartBottomConfig = c3ChartDefaults.getDefaultPieConfig();
  pieChartBottomConfig.bindto = '#{{include.id3}}';
  pieChartBottomConfig.data = pieData;
  pieChartBottomConfig.legend = {
    show: true,
    position: 'bottom'
  };
  pieChartBottomConfig.size = {
    width: 321,
    height: 191
  };
  var pieChartBottomLegend = c3.generate(pieChartBottomConfig);
</script>