patternfly
Version:
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.
431 lines (430 loc) • 12.7 kB
HTML
<!--[if IE 9]><html class="ie9"><![endif]-->
<!--[if gt IE 9]><!-->
<html>
<!--<![endif]-->
<head>
<title>Charts - PatternFly</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../dist/img/favicon.ico">
<!-- iPad retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="../dist/img/apple-touch-icon-precomposed-152.png">
<!-- iPad retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../dist/img/apple-touch-icon-precomposed-144.png">
<!-- iPad non-retina icon -->
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="../dist/img/apple-touch-icon-precomposed-76.png">
<!-- iPad non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../dist/img/apple-touch-icon-precomposed-72.png">
<!-- iPhone 6 Plus icon -->
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="../dist/img/apple-touch-icon-precomposed-180.png">
<!-- iPhone retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../dist/img/apple-touch-icon-precomposed-114.png">
<!-- iPhone non-retina icon (iOS < 7) -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="../dist/img/apple-touch-icon-precomposed-57.png">
<link href="../dist/css/patternfly.min.css" rel="stylesheet" media="screen, print">
<link href="../dist/css/patternfly-additions.min.css" rel="stylesheet" media="screen, print">
<link href="tests.css" rel="stylesheet" media="screen, print">
<script src="../components/jquery/dist/jquery.min.js"></script>
<script src="../components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../components/c3/c3.min.js"></script>
<script src="../components/d3/d3.min.js"></script>
<script src="../dist/js/patternfly.min.js"></script>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Charts</h1>
</div>
<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>Line Chart</h2>
<h3>Default C3 Colors <small> don't use these</small></h3>
<div id="chart"></div>
<h3>Patternfly Colors <small>use these</small></h3>
<div id="chart1"></div>
<h2>Sparkline</h2>
<div class="row">
<div class="col-md-4">
<div id="chart2"></div>
<div class="pull-right">91%</div>
<div class="pull-left">Less than one year remaining</div>
</div>
</div>
<h2>Spline Chart</h2>
<div id="chart3"></div>
<h2>Area Chart</h2>
<div id="chart4"></div>
<h2>Stacked Area Chart</h2>
<div id="chart5"></div>
<h2>Bar Chart</h2>
<div id="chart6"></div>
<h2>Stacked Bar Chart, Rotated</h2>
<div id="chart7"></div>
<h2>Donut Chart</h2>
<div id="chart8"></div>
<h2>Custom Donut Chart</h2>
<div id="chart9"></div>
<script>
var chart = c3.generate({
axis: {
x: {
tick: {
outer: false
}
},
y: {
tick: {
outer: false
}
}
},
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 220, 310, 240, 115, 25],
['data3', 70, 100, 390, 295, 170, 220],
['data4', 10, 340, 30, 290, 35, 20],
['data5', 90, 150, 160, 165, 180, 5]
]
},
grid: {
y: {
show: true
}
},
point: {
r: 4
}
});
var chart1 = c3.generate({
axis: {
x: {
tick: {
outer: false
}
},
y: {
tick: {
outer: false
}
}
},
bindto: '#chart1',
color: {
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 220, 310, 240, 115, 25],
['data3', 70, 100, 390, 295, 170, 220],
['data4', 10, 340, 30, 290, 35, 20],
['data5', 90, 150, 160, 165, 180, 5]
]
},
grid: {
y: {
show: true
}
},
point: {
r: 4
}
});
var chart2 = c3.generate({
axis: {
x: {
show: false
},
y: {
show: false
}
},
bindto: '#chart2',
color: {
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
},
data: {
columns: [
['Less than one year remaining', 10, 14, 12, 20, 31, 27, 44, 36, 52, 55, 62, 68, 69, 88, 74, 88, 91],
],
type: 'area'
},
legend: {
show: false
},
point: {
r: 1,
focus: {
expand: {
r: 4
}
}
},
size: {
height: 80
},
tooltip: {
// because a sparkline should only contain a single data column, the tooltip will only work for a single data column
contents: function (d, defaultTitleFormat, defaultValueFormat, color) {
for (i = 0; i < d.length; i++) {
return '<span class="c3-tooltip-sparkline">' + d[i].value + '%' + '</span>'
}
}
}
});
var chart3 = c3.generate({
axis: {
x: {
tick: {
outer: false
}
},
y: {
tick: {
outer: false
}
}
},
bindto: '#chart3',
color: {
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 220, 310, 240, 115, 25],
['data3', 70, 100, 390, 295, 170, 220],
['data4', 10, 340, 30, 290, 35, 20],
['data5', 90, 150, 160, 165, 180, 5]
],
type: 'spline'
},
grid: {
y: {
show: true
}
},
point: {
r: 4
}
});
var chart4 = c3.generate({
axis: {
x: {
tick: {
outer: false
}
},
y: {
tick: {
outer: false
}
}
},
bindto: '#chart4',
color: {
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
},
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
}
},
grid: {
y: {
show: true
}
},
point: {
r: 4
}
});
var chart5 = c3.generate({
axis: {
x: {
tick: {
outer: false
}
},
y: {
tick: {
outer: false
}
}
},
bindto: '#chart5',
color: {
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
},
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
},
groups: [['data1', 'data2']]
},
grid: {
y: {
show: true
}
},
point: {
r: 4
}
});
var chart6 = c3.generate({
axis: {
x: {
categories: ['Red', 'Orange', 'Green', 'Blue'],
tick: {
outer: false
},
type: 'category'
},
y: {
tick: {
outer: false
}
}
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
},
bindto: '#chart6',
color: {
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
},
data: {
columns: [
['data1', 5, 200, 200, 400],
['data2', 130, 100, 20, 200]
],
type: 'bar'
},
grid: {
y: {
show: true
}
}
});
var chart7 = c3.generate({
axis: {
rotated: true,
x: {
categories: ['Red', 'Orange', 'Green', 'Blue'],
tick: {
outer: false
},
type: 'category'
},
y: {
tick: {
outer: false
}
}
},
bindto: '#chart7',
color: {
pattern: ['#0088ce', '#00659c', '#3f9c35', '#ec7a08', '#cc0000']
},
data: {
columns: [
['data1', 5, 200, 200, 400],
['data2', 130, 100, 20, 200]
],
groups: [
['data1', 'data2']
],
type: 'bar'
},
grid: {
y: {
show: true
}
}
});
var chart8 = c3.generate({
bindto: '#chart8',
data: {
colors: {
Cloud:
'#00659c', Virtual: '#0088ce',
Baremetal: '#969696'
},
columns: [
['Cloud', 4,828],
['Virtual', 13,258],
['Baremetal', 11,1124]
],
type : 'donut',
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: {
title: "29,210 Host Totals"
}
});
var chart9 = c3.generate({
bindto: '#chart9',
type: "donut",
donut: {
title: "A",
label: {show: false},
width: 10
},
size: {
height: 130
},
legend: {
show: false
},
color: {
pattern: ["#EC7A08","#D1D1D1"]
},
tooltip: {
contents: function (d) {
return '<span class="donut-tooltip-pf" style="white-space: nowrap;">' +
Math.round(d[0].ratio * 100) + '%' + ' MHz ' + d[0].name +
'</span>';
}
},
data: {
type: "donut",
columns: [
["Used", 60],
["Available", 40]
],
groups: [
["used", "available"]
],
order: null
},
});
$( "#chart9 .c3-chart-arcs-title" ).html(
'<tspan dy="0" x="0" class="donut-title-big-pf">' +
'60' +
'</tspan>' +
'<tspan dy="20" x="0" class="donut-title-small-pf">' +
'MHz Used' +
'</tspan>');
</script>
</div><!-- /container -->
</body>
</html>