Radial Gauge

Linear Gauge

Bullet Graph

Segmented Display

This sample demonstrates how to change specific display options.

For detailed implementation, please take a look at the HTML code tab.
<!DOCTYPE html>
	Change Options Example - HTML5 jQuery Segmented Display JavaScript Plugin
	<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 state = {
			background: '#DCDCDC',
			border: {
				padding: 10,
				lineWidth: 4,
				strokeStyle: '#76786A'
			digits: 9,
			segmentMode: 'fourteenSegment',
			text: 'Some Info',
			textForeground: '#333333',
			textForegroundUnlit: 'rgba(201, 201, 201, 0.5)'
		var segmentedDisplay = new DataViz.SegmentedDisplay(state);

		function changeTextForeground() {
			state.textForeground = '#6ba851';

		function changeText() {
			// The new text will be 2 digits longer than the text before, so we set the digits option to 11.
			state.digits = 11;
			state.text = 'Hello World';



		<div id="container" style="width: 500px; height: 100px;">
		<br />
		<input id="buttonChangeText" onclick="changeText()" type="button" value="Change text" />
		<input id="buttonTextForeground" onclick="changeTextForeground()" type="button" value="Change text foreground" />