Skip to content

Instantly share code, notes, and snippets.

@madewulf

madewulf/index.html

Created September 4, 2017 11:03
Show Gist options
  • Save madewulf/d2a0638ed3618f3f1cbfa684fb9f3c21 to your computer and use it in GitHub Desktop.
Save madewulf/d2a0638ed3618f3f1cbfa684fb9f3c21 to your computer and use it in GitHub Desktop.
Download ZIP
Britecharts minimal example
Raw
index.html
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/britecharts@2/dist/bundled/britecharts.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.2/d3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/britecharts@2.0.0/dist/css/britecharts.min.css"/>
</head>
<body>
<h1>Britecharts test</h1>
<div class="js-bar-container"></div>
<div class="js-donut-container"></div>
<script>
var data = [
{ name: 'Shiny', id: 1, quantity: 86, percentage: 5 },
{ name: 'Blazing', id: 2, quantity: 300, percentage: 18 },
{ name: 'Dazzling', id: 3, quantity: 276, percentage: 16 },
{ name: 'Radiant', id: 4, quantity: 195, percentage: 11 },
{ name: 'Sparkling', id: 5, quantity: 36, percentage: 2 },
{ name: 'Other', id: 0, quantity: 814, percentage: 48 }
];
function createHorizontalBarChart() {
var barChart = new britecharts.bar(),
margin = {
left: 120,
right: 20,
top: 20,
bottom: 30
},
barContainer = d3.select('.js-bar-container'),
containerWidth = barContainer.node() ? barContainer.node().getBoundingClientRect().width : false;
barChart
.horizontal(true)
.margin(margin)
.width(containerWidth)
.colorSchema(britecharts.colors.colorSchemas.britecharts)
.valueLabel('percentage')
.height(300);
barContainer.datum(data).call(barChart);
}
function createDonutChart() {
var donutChart = britecharts.donut();
donutChart
.width(400)
.height(300);
d3.select('.js-donut-container').datum(data).call(donutChart);
}
createHorizontalBarChart();
createDonutChart();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment