https://dl.dropboxusercontent.com/u/113201788/d3/gauge.zip
The web page codes below shows how to use it:
<html>
<head>
<link href="lib/c3.css" rel="stylesheet"></link>
<script src="lib/jquery-2.1.3.min.js" type="text/javascript"></script>
<script src="lib/d3.min.js" type="text/javascript"></script>
<script src="lib/gauge.js" type="text/javascript"></script>
<script>
$(function(){
createC3Gauge('chtGaugeC3', 'sentiment', 91.4, 200, 180);
var gaugeD3 = createD3Gauge('chtGaugeD3', 'sentiment', 200);
gaugeD3.redraw(91.4);
});
function createD3Gauge(chartElementId, label, chartWidth)
{
var config =
{
size: chartWidth,
label: label,
min: 0,
max: 100,
minorTicks: 5
}
var range = config.max - config.min;
config.yellowZones = [{ from: config.min + range*0.75, to: config.min + range*0.9 }];
config.redZones = [{ from: config.min + range*0.9, to: config.max }];
gaugeD3 = new Gauge(chartElementId, config);
gaugeD3.render();
return gaugeD3;
}
</script>
<style>
body{
padding-top: 10px;
}
</style>
</head>
<body>
<div id="chtGaugeD3"></div>
</body>
</html>
No comments:
Post a Comment