CircleGauge/index.html

<!DOCTYPE html>
<html>
<head>
    <title> Circular Percentage Bar</title>
    <script type="text/javascript" src = "circleGauge.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <style type="text/css">
        html {
            font-size: 12px;
          font-family: 'Roboto', sans-serif;
        }
        .attrName {
            display: inline-block;
            width: 100px;
        }
        #test {
            padding:4px; margin: 0 auto; width: 200px; height: 250px; border-style: solid; border-width: 1px 1px 1px 1px; border-color: black;
        }
    </style>
</head>
<body>
    <div id='test'></div> 
    <div style="margin: 0 auto; background-color: #d7d7d7; padding: 10px; border-radius: 10px; width: 400px;">
        <div>
            <div class="attrName"> value (%): </div>
            <input type="range" id="value" name="value" min = "0" max ="100">
            <a id="valueA"></a>
        </div>
        <div>
            <div class="attrName"> radius: </div>
            <input type="range" id = "radius" name="radius" min = "0" max ="100" value="50">
            <a id="radiusA"></a>
        </div>
        <div>
            <div class="attrName"> line width: </div>
            <input type="range" id="lineWidth" name="lineWidth" min = "0" max ="50">
            <a id="lineWidthA"></a>
        </div>
        <div>
            <div class="attrName"> empty line width: </div>
            <input type="range" id="emptyLineWidth" name="emptyLineWidth" min = "0" max ="50">
            <a id="emptyLineWidthA"></a>
        </div>
        <div>
            <div class="attrName"> text size: </div>
            <input type="range" id="textSize" name="emptyLineWidth" min = "0" max ="50">
            <a id="textSizeA"></a>
        </div>
        <div>
            <div class="attrName"> background color: </div>
            <input id = "bgColor" type="color" name="color" value="#3f87a6">
        </div>
        <div>
            <div class="attrName"> line color: </div>
            <input id= "lineColor" type="color" name="color" value="#d500f9">
        </div>
        <div>
            <div class="attrName"> empty line color: </div>
            <input id = "emptyLineColor" type="color" name="color" value="#3f87a6">
        </div>
        <div>
            <div class="attrName"> text color: </div>
            <input id = "textColor" type="color" name="color" value="#3f87a6">
        </div>
        <div>
            <div class="attrName"> animation: </div>
            <input id ="animTo" type ="text" name ="num" value="100" size ="10">
            <button onclick="animStart();"> Start! </button>
        </div>
    </div>
</body>
<script type="text/javascript">
    
    var target = document.getElementById('test');
   
    var circularBar = new CircleGauge({
        lineWidth : 5,
        value: 65,
        radius : 25,
        lineColor: '#e65348',
        emptyLineColor: '#eaeaea',
        showText: true,
        emptyLineWidth: 2,
        textColor : '#878787',
        textSize:12,
        text: function(value) {
            return (parseFloat(value) |0 ) + "%";
        }
    }).create(target);
    
    // Value
    var pvalue = document.getElementById('value');
    pvalue.value = circularBar.val();

    var valueA = document.getElementById('valueA');
    valueA.innerHTML = circularBar.val();
   
    pvalue.addEventListener('input', function() {
        circularBar.val(parseFloat(pvalue.value));
        valueA.innerHTML = pvalue.value;
    });

    // line width
    var lineWidth = document.getElementById('lineWidth');
    lineWidth.value = circularBar.lineWidth();

    var lineWidthA = document.getElementById('lineWidthA');
    lineWidthA.innerHTML = lineWidth.value;
    
    lineWidth.addEventListener('input', function() {
        circularBar.lineWidth(lineWidth.value);
        lineWidthA.innerHTML = lineWidth.value;
    });

    // empty line width
    var emptyLineWidth = document.getElementById('emptyLineWidth');
    emptyLineWidth.value = circularBar.emptyLineWidth();

    var emptyLineWidthA = document.getElementById('emptyLineWidthA');
    emptyLineWidthA.innerHTML = emptyLineWidth.value;
    
    emptyLineWidth.addEventListener('input', function(){
        circularBar.emptyLineWidth(emptyLineWidth.value);
        emptyLineWidthA.innerHTML = emptyLineWidth.value;
    });

    // radius
    var radius = document.getElementById('radius');
    radius.value = circularBar.radius();

    var radiusA = document.getElementById('radiusA');
    radiusA.innerHTML = radius.value;

    radius.addEventListener('input', function(){
        circularBar.radius(radius.value);
        radiusA.innerHTML = radius.value;
    });

    // line Color
    var lineColor = document.getElementById('lineColor');
    lineColor.value = circularBar.lineColor();

    lineColor.addEventListener("change", function(){
        circularBar.lineColor(lineColor.value);
    });

    // empty line color
    var emptyLineColor = document.getElementById('emptyLineColor');
    emptyLineColor.value = circularBar.emptyLineColor();

    emptyLineColor.addEventListener("change", function (){
        circularBar.emptyLineColor(emptyLineColor.value);
    })


    //text Color
    var textColor = document.getElementById('textColor');
    textColor.value = circularBar.textColor();

    textColor.addEventListener("change", function(){
        circularBar.textColor(textColor.value);
    });

    //text Size
    var textSize = document.getElementById('textSize');
    textSize.value = circularBar.textSize();

    var textSizeA = document.getElementById('textSizeA');
    textSizeA.innerHTML = circularBar.textSize();

    textSize.addEventListener("input", function (){
        circularBar.textSize(textSize.value);
        textSizeA.value = textSize.value;
    });

    var animValue = document.getElementById('animTo');
    function animStart ()
    {
        circularBar.val(animValue.value, true, 100, function(){
        });
    }

</script>
</html>