radial-progress-chart
Version:
A customizable Radial Progress Chart written on the top of D3.js.
164 lines (139 loc) • 3.28 kB
HTML
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<style>
body {
background: black;
font-family: 'Helvetica Neue', Helvetica, Arial, Verdana, sans-serif;
}
ul {
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin: 2px 10px;
}
hr {
border-color: #565656;
}
svg {
display: block;
margin: 0 auto;
}
.container {
margin: 0 auto;
}
.main svg {
width: 65vw;
max-width: 500px;
}
.week {
text-align: center;
}
ul.week li svg {
width: 8vw;
max-width: 80px;
}
.date {
color: white;
font-size: 25px;
font-weight: 100;
text-align: center;
margin-bottom: 15px;
}
.circle {
margin: 3px auto;
border-radius: 50%;
width: 27px;
height: 27px;
line-height: 27px;
text-align: center;
color: #565656;
font-size: 14px;
font-weight: 300;
}
li:hover .circle {
color: white;
background-color: #565656;
}
.active {
color: white;
background-color: #fa1654 ;
}
.rbc-label-start {
font-family: fontawesome;
font-weight: bold;
font-size: 30px;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.0/d3.js"></script>
<script src="../dist/radial-progress-chart.js"></script>
<div class="container">
<ul class="week"></ul>
<hr>
<div class="date"></div>
<div class="main"></div>
</div>
<script>
var data = [
{day: 'M'},
{day: 'T'},
{day: 'W'},
{day: 'T'},
{day: 'F'},
{day: 'S'},
{day: 'S'}
];
var dateFormatter = d3.time.format("%A, %B %d, %Y");
var mainChart = new RadialProgressChart('.main', {
diameter: 130,
series: [
{labelStart: '\uF106', value: 50},
{labelStart: '\uF101', value: 50},
{labelStart: '\uF105', value: 50}
]}
);
d3.select('.week').selectAll('li')
.data(data).enter()
.append('li').on('click', function (d) {
// Update active class, date and main chart
d3.selectAll('.circle').classed('active', false);
d3.select(this).select('.circle').classed('active', true);
d3.select('.date').text(d.date);
mainChart.update(d.series);
})
.append('div').attr('class', 'circle').text(function (d) {
return d.day;
})
.each(function (d, i) {
d.date = dateFormatter(getDate(i));
d.series = [getRandom(), getRandom(), getRandom()];
new RadialProgressChart(this.parentNode, {
diameter: 10,
stroke: {
width: 6,
gap: 1
},
series: d.series
});
});
// Return some chronological dates
function getDate(i) {
var date = new Date('2015-06-16');
date.setDate(date.getDate() + i);
return date;
}
// Random int between 20-80
function getRandom() {
return Math.round(Math.random() * 60) + 20;
}
// Select monday by default
document.querySelector('li').click();
</script>
</body>
</html>