patternfly/tests-src/_includes/widgets/charts/bar-vertical-group.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}}"></div>
<script>
  var c3ChartDefaults = $().c3ChartDefaults();

  var chartUrls = [
    'https://www.gogole.com',
    'https://www.yahoo.com',
    'https://www.bing.com/',
    'https://duckduckgo.com/'
  ];
  var categories = ['Q1', 'Q2', 'Q3', 'Q4'];
  var columnsData = [
    ['data1', 400, 360, 320, 175]
  ];

  var groupedcCategories = ['2013', '2014', '2015'];
  var groupedColumnsData = [
    ['Q1', 400, 250, 375],
    ['Q2', 355, 305, 300],
    ['Q3', 315, 340, 276],
    ['Q4', 180, 390, 190]
  ];
  var groupedColors = {
    pattern: [
      $.pfPaletteColors.red,
      $.pfPaletteColors.blue,
      $.pfPaletteColors.orange,
      $.pfPaletteColors.green
    ]
  };

  var groupedVerticalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
  groupedVerticalBarChartConfig.bindto = '#{{include.id}}';
  groupedVerticalBarChartConfig.axis = {
    x: {
      categories: groupedcCategories,
      type: 'category'
    }
  };
  groupedVerticalBarChartConfig.data = {
    type: 'bar',
    columns: groupedColumnsData,
    // optional drilldown behavior
    onclick: function (d, element) {
      window.location = chartUrls[d.index];
    }
  };
  groupedVerticalBarChartConfig.color = groupedColors;
  var groupedVerticalBarChart = c3.generate(groupedVerticalBarChartConfig);
</script>