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 so that it is easier for me to use:

The web page codes below shows how to use it:


<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>

 createC3Gauge('chtGaugeC3', 'sentiment', 91.4, 200, 180);
 var gaugeD3 = createD3Gauge('chtGaugeD3', 'sentiment', 200);

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);
 return gaugeD3;
padding-top: 10px;
<div id="chtGaugeD3"></div>

No comments:

Post a Comment