@bunetz/radial-progress-chart-with-tooltip
Version:
Radial Progress Chart extension with tooltip
137 lines (114 loc) • 3.03 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">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto">
<link rel="stylesheet" href="demo.css">
</head>
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="../index.js"></script>
<div id="simple" style="width: 400px"></div>
<div id="complex" style="width: 400px"></div>
<script>
var config = {
diameter: 200,
stroke: {
width: 40,
gap: 2
},
animation: {
duration: 1750,
delay: 100
//delay: function(index){}
},
min: 650,
max: 850,
series: [130, 10, 45],
series: [
{
//title: 'walk',
labelStart: '\uF105',
//labelStart: function(value, percentage){},
//labelEnd: '10m',
//labelEnd: function(value, percentage){},
color: {
linearGradient: { x1: '0%', y1: '100%', x2: '50%', y2: '0%', spreadMethod: 'pad' },
//radialGradient: {cx:"60" cy:"60" r:"50", fx:"0.25" fy:"0.25" spreadMethod:"pad" gradientUnits:"userSpaceOnUse"}
stops: [
{offset: '0%', 'stop-color': '#fe08b5', 'stop-opacity': 1},
{offset: '100%', 'stop-color': '#ff1410', 'stop-opacity': 1}
]},
// color: {
// solid: '#fe08b5'
// },
// color: {
// interpolate: ["#ff0000", "#0000ff"]
// },
// color: '#fe08b5',
// color: ["#ff0000", "#0000ff"]
value: 800
}
],
center: {
content: '300',
x:40,
y:10
},
center: {
content: ['500', 'of 1000 cals'],
x:40,
y:10
},
center: {
content: function(value){ return value + ' cals'},
x:40,
y:10
},
center: {
content: '<div></div>',
x:40,
y:10,
html: true
}
// center: '300' or ['500', 'of 1000 cals'] or function(value){ return value + ' cals'}
};
var simple = new RadialProgressChart('#simple', {series: [30, 60, 130]});
//simple.series[1].value = 80;
//simple.update();
//simple.update(0, 70)
//simple.update(2, 20)
//simple.update([{value: 70}, 10, 45])
//simple.update({series: [{value: 70}, 10, 45]})
var options = {
diameter: 150,
series: [
{
title: 'walk',
labelStart: '\uF105',
color: '#fe08b5',
value: 101
},
{
title: 'test',
labelStart: '\uF105',
color: '#fe08b5',
value: 99
},
{
title: 'test',
labelStart: '\uF106',
color: '#feee33',
value: 100
}
],
center: {
content: 'Progress'
}
};
var complex = new RadialProgressChart('#complex', options);
complex.update([2, 5, 120])
</script>
</body>
</html>