charts/c3/examples/donut_chart/output.html


<!DOCTYPE html>
<html>
<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.15/c3.min.js"></script>
	<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.15/c3.min.css">

<style>
table, th, td {
	border: 1px solid black;
}
</style>

</head>
<body>
	<h1>Donut Chart</h1>

<!--
	<input type="button" onclick="chart.transform('bar')" value="Bar" />
	<input type="button" onclick="chart.transform('pie')" value="Pie" />
	<input type="button" onclick="chart.transform('donut')" value="Donut" />
-->

	<div id="chart"></div>

	<script>

	var chart = c3.generate(
		{"bindto":"#chart","data":{"columns":[["Yes",60],["No",40]],"type":"donut"},"axis":{"x":{}},"grid":{"x":{"lines":{}},"y":{"lines":{}}},"donut":{"title":"Votes"},"bar":{"WidthRatio":0,"Width":0}}
	);

	</script>

	

</body>
</html>