WordPress.org

Ready to get started?Download WordPress

Forums

YOP Poll
[resolved] Yop Poll, visualize results with a donut chart (3 posts)

  1. Super_Guillaume
    Member
    Posted 6 months ago #

    Hi all,

    I'm playing with Yop Poll and I can say that this plugin rocks.
    The only thing that I can't achieve is to visualize the poll's results with a donut chart. Currently, we only can render it with a bar chart (which is cool).

    I would like to sync highchart.js lib to Yop Poll. Here is the donut chart rendered by highchart : jsfiddle

    Have you got any ideas to achieve that ?

    https://wordpress.org/plugins/yop-poll/

  2. YOP
    Member
    Plugin Author

    Posted 6 months ago #

    Hi Super_Guillaume,

    We plan to introduce this feature for our next release.

    Best wishes,

    YOP Team

  3. Super_Guillaume
    Member
    Posted 6 months ago #

    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%() {
    
    };

Reply

You must log in to post.

About this Plugin

About this Topic