Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display


This sample demonstrates how to specify bevel rate for the segmented displays. The bevelRate option the bevel of the segments in the digit. Please note that bevelRate option is aplicable only to seven segmented displays.

For detailed implementation, please take a look at the HTML code tab. 
 
<!DOCTYPE html>
<html>
<head>
	<title>
	Bevel Rate Example - HTML5 jQuery Segmented Display JavaScript Plugin
</title>
	<link rel="stylesheet" type="text/css" href="../../css/dataviz.gauges.css" />
	<script src="../../js/dataviz.gauges.min.js" type="text/javascript"></script>
	
	<script lang="javascript" type="text/javascript">
		var segmentedDisplay = new DataViz.SegmentedDisplay({
			background: '#DCDCDC',
			border: {
				padding: 10,
				lineWidth: 4,
				strokeStyle: '#76786A'
			},
			digits: 10,
			segmentMode: 'sevenSegment',
			text: '3.141592653',
			bevelRate: 0.6,
			textForeground: '#333333',
			textForegroundUnlit: 'rgba(201, 201, 201, 0.5)'
		});
		segmentedDisplay.write('container');
	</script>

</head>
<body>
	<div>
		<div id="container" style="width: 500px; height: 100px;">
		</div>
	</div>
</body>
</html>