Thursday, January 1, 2015

D3: Simple Javascript class wrapper for Gauge

Below is the link for the source code which makes some minor modification over the gauge implementation in D3 (please refers to http://bl.ocks.org/tomerd/1499279) so that it is easier for me to use:

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