oecd-simple-charts
Version:
D3 charting library for creating pearl charts, stacked bar charts and box plots
165 lines (146 loc) • 4.03 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="description" content="webkid react starterkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>OECD Charting Library Playground</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="oecd-simple-charts.css">
<script src="oecd-simple-charts.js"></script>
</head>
<body>
<div id="chart-container" style="max-width:800px; margin: 0 auto;">
<div id="PearlChartExample"></div>
<button id="pearlchart__button">Update Pearl Chart</button>
<div id="StackedChartExample"></div>
<button id="stackedchart__button">Update Stacked Bar Chart</button>
<div id="BoxPlotExample"></div>
<button id="boxplot__button">Update Box Plot</button>
</div>
<script>
var callbackFunc = function(data) {
console.log(data);
}
var PearlChartExample = new OECDCharts.PearlChart({
container: '#PearlChartExample',
extent: [300, 600],
title: 'Pearl Chart',
renderInfoButton: true,
showTicks: true,
showLabels: false,
colorLabels: true,
callback: callbackFunc,
data: [
{
value: 410,
color: '#900c3f'
},
{
value: 520,
color: '#189aa8'
}
],
labelFormat: function(val) {
return Math.round(val) + '$';
}
});
document.getElementById('pearlchart__button').onclick = function() {
PearlChartExample.update([
{
value: 490,
color: '#900c3f'
},
{
value: 580,
color: '#189aa8'
}
]);
}
PearlChartExample.on('infoclick', function() {
console.log('show popup');
});
var StackedChartExample = new OECDCharts.StackedChart({
container: '#StackedChartExample',
title: 'Stacked Bar Chart',
renderInfoButton: true,
data: [
{
values: [1,2,3,4,5],
barLabels: ['0%', '100%'],
colors: ['#fddd5d', '#900c3f'],
stackLabels: ['I', 'II', 'III', 'IV', 'V']
},
{
values: [2,4,6,8,20],
barLabels: ['0%', '100%'],
colors: ['#fddd5d', '#189aa8']
}
]
});
document.getElementById('stackedchart__button').onclick = function() {
StackedChartExample.update([
{
values: [1,10,3,4,5],
barLabels: ['0%', '100%'],
colors: ['#fddd5d', '#900c3f'],
stackLabels: ['1', '2', '3', '4', '5']
},
{
values: [2,4,10,15,20],
barLabels: ['0%', '100%'],
colors: ['#fddd5d', '#189aa8']
}
]);
}
StackedChartExample.on('infoclick', function() {
console.log('show showPopup');
});
var BoxPlotExample = new OECDCharts.BoxPlot({
container: '#BoxPlotExample',
title: 'Box Plot',
extent: [350, 650],
step: 50,
renderInfoButton: true,
data: [
{
values: [480, 500, 530],
colors: ['#fddd5d', '#c7754e', '#900c3f'],
labelLeft: {
text: 'male low'
},
labelRight: {
text: 'male top'
}
},
{
values: [400, 520, 550],
colors: ['#aad356', '#61b77f', '#189aa8']
}
]
});
document.getElementById('boxplot__button').onclick = function() {
BoxPlotExample.update([
{
values: [400, 550, 580],
colors: ['#fddd5d', '#c7754e', '#900c3f'],
labelLeft: {
text: 'male low'
},
labelRight: {
text: 'male top'
}
},
{
values: [400, 520, 570],
colors: ['#aad356', '#61b77f', '#189aa8']
},
{
values: [400, 450, 500],
colors: ['#189aa8', '#48798c', '#78586f']
}
]);
}
</script>
</body>
</html>