spec/html/bar-charts.html in patternfly-sass-3.3.3 vs spec/html/bar-charts.html in patternfly-sass-3.3.4
- old
+ new
@@ -41,140 +41,201 @@
<div class="alert alert-warning">
<span class="pficon pficon-warning-triangle-o"></span>
These examples are included for development testing purposes. For official documentation, see <a href="https://www.patternfly.org" class="alert-link">https://www.patternfly.org</a>, <a href="http://getbootstrap.com" class="alert-link">http://getbootstrap.com</a>, and <a href="http://c3js.org/">http://c3js.org/</a>
</div>
<hr>
- <h2>Vertical Bar Chart</h2>
- <div class="row">
- <div class="col-lg-4 col-sm-6 col-xs-12">
- <div id="verticalBarChart"></div>
- </div>
- </div>
- <h2>Grouped Vertical Bar Chart</h2>
- <div class="row">
- <div class="col-lg-4 col-sm-6 col-xs-12">
- <div id="groupedVerticalBarChart"></div>
- </div>
- </div>
- <h2>Horizontal Bar Chart</h2>
- <div class="row">
- <div class="col-lg-4 col-sm-6 col-xs-12">
- <div id="horizontalBarChart"></div>
- </div>
- </div>
- <h2>Grouped Horizontal Bar Chart</h2>
- <div class="row">
- <div class="col-lg-4 col-sm-6 col-xs-12">
- <div id="groupedHorizontalBarChart"></div>
- </div>
- </div>
- <script>
+<h2>Vertical Bar Chart</h2>
+<div class="row">
+ <div class="col-lg-4 col-sm-6 col-xs-12">
+ <div id="verticalBarChart"></div>
+<script>
+ var c3ChartDefaults = $().c3ChartDefaults();
- 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 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 verticalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
+ verticalBarChartConfig.bindto = '#verticalBarChart';
+ verticalBarChartConfig.axis = {
+ x: {
+ categories: categories,
+ type: 'category'
+ }
+ };
+ verticalBarChartConfig.data = {
+ type: 'bar',
+ columns: columnsData,
+ // optional drilldown behavior
+ onclick: function (d, element) {
+ window.location = chartUrls[d.index];
+ }
+ };
+ var verticalBarChart = c3.generate(verticalBarChartConfig);
+</script>
- 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
- ]
- };
+ </div>
+</div>
+<h2>Grouped Vertical Bar Chart</h2>
+<div class="row">
+ <div class="col-lg-4 col-sm-6 col-xs-12">
+ <div id="groupedVerticalBarChart"></div>
+<script>
+ var c3ChartDefaults = $().c3ChartDefaults();
- var verticalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
- verticalBarChartConfig.bindto = '#verticalBarChart';
- verticalBarChartConfig.axis = {
- x: {
- categories: categories,
- type: 'category'
- }
- };
- verticalBarChartConfig.data = {
- type: 'bar',
- columns: columnsData,
- // optional drilldown behavior
- onclick: function (d, element) {
- window.location = chartUrls[d.index];
- }
- };
- var verticalBarChart = c3.generate(verticalBarChartConfig);
+ 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 groupedVerticalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
- groupedVerticalBarChartConfig.bindto = '#groupedVerticalBarChart';
- 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);
+ 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 horizontalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
- horizontalBarChartConfig.bindto = '#horizontalBarChart';
- horizontalBarChartConfig.axis = {
- rotated: true,
- x: {
- categories: categories,
- type: 'category'
- }
- };
- horizontalBarChartConfig.data = {
- type: 'bar',
- columns: columnsData,
- // optional drilldown behavior
- onclick: function (d, element) {
- window.location = chartUrls[d.index];
- }
- };
- var horizontalBarChart = c3.generate(horizontalBarChartConfig);
+ var groupedVerticalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
+ groupedVerticalBarChartConfig.bindto = '#groupedVerticalBarChart';
+ 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>
- var groupedHorizontalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
- groupedHorizontalBarChartConfig.bindto = '#groupedHorizontalBarChart';
- groupedHorizontalBarChartConfig.axis = {
- rotated: true,
- x: {
- categories: groupedcCategories,
- type: 'category'
- }
- };
- groupedHorizontalBarChartConfig.data = {
- type: 'bar',
- columns: groupedColumnsData,
- // optional drilldown behavior
- onclick: function (d, element) {
- window.location = chartUrls[d.index];
- }
- };
- groupedHorizontalBarChartConfig.color = groupedColors;
- var groupedHorizontalBarChart = c3.generate(groupedHorizontalBarChartConfig);
- </script>
+ </div>
+</div>
+<h2>Horizontal Bar Chart</h2>
+<div class="row">
+ <div class="col-lg-4 col-sm-6 col-xs-12">
+ <div id="horizontalBarChart"></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 horizontalBarChartConfig = $().c3ChartDefaults().getDefaultBarConfig(categories);
+ horizontalBarChartConfig.bindto = '#horizontalBarChart';
+ horizontalBarChartConfig.axis = {
+ rotated: true,
+ x: {
+ categories: categories,
+ type: 'category'
+ }
+ };
+ horizontalBarChartConfig.data = {
+ type: 'bar',
+ columns: columnsData,
+ // optional drilldown behavior
+ onclick: function (d, element) {
+ window.location = chartUrls[d.index];
+ }
+ };
+ var horizontalBarChart = c3.generate(horizontalBarChartConfig);
+</script>
+
+ </div>
+</div>
+<h2>Grouped Horizontal Bar Chart</h2>
+<div class="row">
+ <div class="col-lg-4 col-sm-6 col-xs-12">
+ <div id="groupedHorizontalBarChart"></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 groupedHorizontalBarChartConfig = $().c3ChartDefaults().getDefaultGroupedBarConfig();
+ groupedHorizontalBarChartConfig.bindto = '#groupedHorizontalBarChart';
+ groupedHorizontalBarChartConfig.axis = {
+ rotated: true,
+ x: {
+ categories: groupedcCategories,
+ type: 'category'
+ }
+ };
+ groupedHorizontalBarChartConfig.data = {
+ type: 'bar',
+ columns: groupedColumnsData,
+ // optional drilldown behavior
+ onclick: function (d, element) {
+ window.location = chartUrls[d.index];
+ }
+ };
+ groupedHorizontalBarChartConfig.color = groupedColors;
+ var groupedHorizontalBarChart = c3.generate(groupedHorizontalBarChartConfig);
+</script>
+
+ </div>
+</div>
</div><!-- /container -->
</body>
</html>