Example 2

Gauge with refresh

by Herman Sontrop

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<div id="chart1"></div>

JavaScript

var gaugeData = {'data': 80.0}
  
	// create a chart and set options
	// note that via the c3.js API we bind the chart to the element with id equal to chart1
	var chart = c3.generate({
		bindto: '#chart1',
		data: {
			json: gaugeData,
			type: 'gauge',
		},
		gauge: {
			label:{
				//returning here the value and not the ratio
				format: function(value, ratio){ return value;}
			},
			min: 0,
			max: 100,
			width: 15,
			units: 'value' //this is only the text for the label
		}
	});
	
	// this function will update every 2000 milliseconds
	// and create a new value between 0 and 100
	setInterval(function () {
		
		// create a random value between 0 and 100, rounded to 2 digits
		var newValue = Math.floor(100 * Math.random());
		
		// create a data array holding the random value
		var newData = {'data': newValue };
		
		// tell the chart to load the new data
		chart.load({
		  json: newData
		});
    }, 2000);