<script type="text/javascript">

    jQuery(document).ready(function () {

        // GAUGE PLUGIN
        // =================================================================
        // Require Gauge.js
        // -----------------------------------------------------------------
        // http://bernii.github.io/gauge.js/
        // =================================================================
        var opts = {
            lines: 10, // The number of lines to draw
            angle: 0, // The length of each line
            lineWidth: 0.41, // The line thickness
            pointer: {
                length: 0.75, // The radius of the inner circle
                strokeWidth: 0.035, // The rotation offset
                color: 'rgba(0, 0, 0, 0.38)' // Fill color
            },
            limitMax: 'true', // If true, the pointer will not go past the end of the gauge
            colorStart: '#fff', // Colors
            colorStop: '#fff', // just experiment with them
            strokeColor: '#914887', // to see which ones work best for you
            generateGradient: true
        };


        var target = document.getElementById('demo-gauge'); // your canvas element
        var gauge = new Gauge(target).setOptions(opts); // create sexy gauge!
        gauge.maxValue = 100; // set max gauge value
        gauge.animationSpeed = 5; // set animation speed (32 is default value)
        gauge.set({{ persent }}); // set actual value
        gauge.setTextField(document.getElementById("demo-gauge-text"));


    });
</script>