Yop Poll, visualize results with a donut chart

Hi Super_Guillaume,

We plan to introduce this feature for our next release.

Best wishes,

YOP Team

Hmm I put this javascript in my javascript template and it works, but that’s not very pretty. But thank you for your reply and good luck ;D

var poll_total = [];
	$( ".yop-poll-answers ul li:not(:last-child)" ).each(function( index ) {
		var lab_value = $( this ).find("label").text();
		var span_value = parseInt($( this ).find("span").text().replace ( /[^\d.]/g, '' ));
		var poll_couple = [];
		poll_couple.length = 0;
		poll_couple.push( lab_value );
		poll_couple.push( span_value );
		poll_total.push(poll_couple);
	});

		var series_update = [];
    $('.yop_poll_vote_button').click(function() {
        var chart_update = $('#container').highcharts();
	  $( ".yop-poll-answers ul li" ).each(function( index ) {
		var span_value_update = parseInt($( this ).find("span").text().replace ( /[^\d.]/g, '' ));
                chart.series[0].data[index].update({
                	y: span_value_update
           		});
	});
    });

    var colors = [ '#c5071b', '#a77eb1', '#a91a31','#8c6994', '#b05b85' ];
     Highcharts.setOptions({
            colors: colors,
             chart: {
                style: {
                    fontFamily: 'Arial'
                }
            }
     });
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
		    return {
		        radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
		        stops: [
		            [0, color],
		            [1, Highcharts.Color(color).brighten(-0.1).get('rgb')]
		        ]
		    };
		});
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'pie'
        },
        legend: {
            layout : 'vertical',
            borderColor : '',
            itemMarginBottom: 30,
            itemStyle: {
               cursor: 'pointer',
               color: '#666666',
               fontSize: '12px',
               width:'200px',
            }
        },
        tooltip:{
            enabled:false
        },
        title:{
            text:''
        },
        plotOptions: {
            pie: {
                innerSize: '50%',
                dataLabels: {
                    connectorWidth: 0,
                    connectorPadding: 0,
                    distance: 10,
                    style: {
                        fontWeight:'bold'
                    },
                    formatter: function () {
                        return '<span style="color:'+colors[this.point.x]+';">'+ Math.round(this.percentage) +'%</span>';
                    },
                },
                showInLegend: true
             }
        },
       credits: {
        enabled: false
       },
        series: [{
            data: poll_total
        }]
    });

function stripBorder_%POLL-ID%(object) {
	object.each(function() {
		if( parseInt(jQuery(this).width() ) > 0) {
			jQuery(this).width(
				parseInt(
					jQuery(this).width() ) -
					parseInt(jQuery(this).css("border-left-width")) -
					parseInt(jQuery(this).css("border-right-width"))
			);
			}
		else {
		jQuery(this).css("border-left-width", "0px");
		jQuery(this).css("border-right-width", "0px");
		}
	});
}
function stripPadding_%POLL-ID%(object) {
	object.each(function() {
		jQuery(this).width(
		parseInt( jQuery(this).width() ) -
		parseInt(jQuery(this).css("padding-left")) -
		parseInt(jQuery(this).css("padding-left"))
		);
	});
}

function strip_results_%POLL-ID%() {
	stripPadding_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop_poll_li_result-%POLL-ID%") );
	stripBorder_%POLL-ID%(  jQuery("#yop-poll-container-%POLL-ID% .yop-poll-result-bar-%POLL-ID%") );
}

jQuery(document).ready(function(e) {
	if(typeof window.strip_results_%POLL-ID% == "function")
		strip_results_%POLL-ID%();
	if(typeof window.tabulate_answers_%POLL-ID% == "function")
		tabulate_answers_%POLL-ID%();
	if(typeof window.tabulate_results_%POLL-ID% == "function")
		tabulate_results_%POLL-ID%();
});

function equalWidth_%POLL-ID%(obj, cols, findWidest ) {
	findWidest  = typeof findWidest  !== "undefined" ? findWidest  : false;
	if ( findWidest ) {
		obj.each(function() {
			var thisWidth = jQuery(this).width();
			width = parseInt(thisWidth / cols);
			jQuery(this).width(width);
			jQuery(this).css("float", "left");
		});
	}
	else {
		var widest = 0;
		obj.each(function() {
			var thisWidth = jQuery(this).width();
			if(thisWidth > widest) {
				widest = thisWidth;
			}
		});
		width = parseInt( widest / cols);
		obj.width(width);
		obj.css("float", "left");
	}
}

function tabulate_answers_%POLL-ID%() {
	equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID%"), %ANSWERS-TABULATED-COLS% );
	//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-answer-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %ANSWERS-TABULATED-COLS%, true );
}

function tabulate_results_%POLL-ID%() {
	equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID%"), %RESULTS-TABULATED-COLS% );
	//equalWidth_%POLL-ID%( jQuery("#yop-poll-container-%POLL-ID% .yop-poll-li-result-%POLL-ID% .yop-poll-results-bar-%POLL-ID% div "), %RESULTS-TABULATED-COLS%, true );
	}

jQuery(document).ready(function(){
	runOnPollStateChange_%POLL-ID%();
});

function runOnPollStateChange_%POLL-ID%() {

};