D3.js Template

by HemalathaThanigaivel

HTML

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
         <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://d3js.org/d3.v3.min.js"></script>
     

   
</head>
<body>
    <div id="Chart"></div>
</body>
</html>

JavaScript

var CenterX = 0,
    CenterY = 0,
    TopX,
    TopY,
    LeftX,
    LeftY,
    RightX,
    RightY;

var svg, arc, needleG,chartName,ColorsPercent,arc1,arc2, g;
var chartInset = 10;


var chartHeight,chartWidth;
var  barWidth;

class GaugeChart{   

    constructor(input) {
        this.ChartColor = input.ChartColor ||"#006DE3";
        this.innerRadius = input.innerRadius||50;
        this.outerRadius = input.outerRadius||60;
        this.TextColor = input.TextColor||"#000000";
        this.NeedleColor = input.NeedleColor || "black";
        this.margin = { "Left": 1, "Right": 1, "Top": 1, "Bottom": 1 };
        if (input.margin != undefined) {
            this.margin.Left = input.margin.Left || 1;
            this.margin.Right = input.margin.Right || 1;
            this.margin.Top = input.margin.Top || 1;
            this.margin.Bottom = input.margin.Bottom || 1;
        }
        this.NeedleHeight = input.NeedleHeight || this.outerRadius;
        this.NeedleRadius = input.NeedleRadius||3;
        this.ColorPerPercent = input.ColorPerPercent;
        this.id = input.id;

    }
    
    CreateGaugeChart(percent) {
    
        chartHeight = this.outerRadius + (this.margin.Top + this.margin.Bottom) + (this.NeedleRadius*2) + 20;
        chartWidth = (this.outerRadius * 2) + (this.margin.Left+this.margin.Right) + 30;
    		barWidth = 40 * chartWidth / 300;
        chartName = "Gauge_" + this.id.replace(/\s+/g, "");     
        var thetaRad = percToRad(0) / 2;

        TopX =( CenterX - this.NeedleHeight * Math.cos(thetaRad))/2;
        TopY = (CenterY - this.NeedleHeight * Math.sin(thetaRad))/2;

        LeftX = CenterX - this.NeedleRadius * Math.cos(thetaRad - Math.PI / 2);
        LeftY = CenterY - this.NeedleRadius * Math.sin(thetaRad - Math.PI / 2);

        RightX = CenterX - this.NeedleRadius * Math.cos(thetaRad + Math.PI / 2);
        RightY = CenterY - this.NeedleRadius * Math.sin(thetaRad + Math.PI / 2);

        svg = d3.select("#"+this.id)
           ...