| 1234567891011121314151617181920212223242526272829303132333435363738394041 |
- function makesvg(percentage, inner_text){
- var array = inner_text.split("/");
- var abs_percentage = Math.abs(percentage).toString();
- var percentage_str = percentage.toString();
- var classes = ""
- if(percentage < 0){
- classes = "danger-stroke circle-chart__circle--negative";
- } else if(percentage > 0 && percentage <= 30){
- classes = "warning-stroke";
- } else{
- classes = "success-stroke";
- }
- var svg = '<svg class="circle-chart" viewbox="0 0 33.83098862 33.83098862" xmlns="http://www.w3.org/2000/svg">'
- + '<circle class="circle-chart__background" cx="16.9" cy="16.9" r="15.9" />'
- + '<circle class="circle-chart__circle '+classes+'"'
- + 'stroke-dasharray="'+ abs_percentage+',100" cx="16.9" cy="16.9" r="15.9" />'
- + '<g class="circle-chart__info">'
- + ' <text class="circle-chart__percent" x="17.9" y="13.5">'+array[0]+'</text>';
- if(array[1]){
- svg += '<text class="circle-chart__subline" x="17.9" y="22">'+array[1]+'</text>'
- }
-
- svg += ' </g></svg>';
-
- return svg
- }
- (function( $ ) {
- $.fn.circlechart = function() {
- this.each(function() {
- var percentage = $(this).data("percentage");
- var inner_text = $(this).text();
- $(this).html(makesvg(percentage, inner_text));
- });
- return this;
- };
- }( jQuery ));
|