Javascript examples for Canvas:Example
add the value with Gauge.js
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="http://bernii.github.io/gauge.js/dist/gauge.min.js"></script> <style id="compiled-css" type="text/css"> label {//from w ww. ja v a 2s.c o m display:block; margin-left:145px; margin-top:-80px; } </style> <script type="text/javascript"> window.onload=function(){ var opts = { lines: 12, angle: 0, lineWidth: 0.1, pointer: { length: 0.9, strokeWidth: 0.035, color: '#000000' }, limitMax: 'false', colorStart: '#006EAB', colorStop: '#006EAB', strokeColor: '#FFFFFF', generateGradient: true }; var target = document.getElementById('foo'); // your canvas element var gauge = new Donut(target).setOptions(opts); // create sexy gauge! gauge.maxValue = 100; gauge.animationSpeed = 10; gauge.set(41); // set actual value } </script> </head> <body> <canvas id="foo"></canvas> <label>41%</label> </body> </html>