How can I add multiple flot pie charts to a page with custom formatters?

Question

The problem I'm having is with the formatters. The pie charts render fine, except for the text to be displayed on each slice. I have 2 separate functions set up for the formatters, but it only seems to be using one, depending on which order I place the pieces of code. Here's what I have:

<script type="text/javascript">
    $( document ).ready( function() {
        var d_pie = <?= json_encode( $plots ); ?>,
            d_pie2 = <?= json_encode( $requested_array ) ?>,
            pie1_formatter = function( label, series ) {
                return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;"><strong>' + label + '</strong><br/>' + series.data[0][1] + ' ' + ( series.data[0][1] == 1 ? 'vote' : 'votes' ) + '</div>';
            },
            pie2_formatter = function( label, series ) {
                return '<div style="font-size:8pt;text-align:center;padding:2px;color:white;"><strong>' + label + '</strong><br/>' + series.data[0][1] + '%</div>';
            };

        $.plot( '#chart_pie', d_pie, $.extend( true, {}, Plugins.getFlotDefaults(), {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 2 / 3,
                        formatter: function( label, series ) {
                            return pie1_formatter( label, series );
                        },
                        threshold: 0.1
                    }
                }
            },
            grid: { hoverable: true },
            tooltip: true,
            tooltipOpts: {
                content: '%p.0%, %s',
                shifts: {
                    x: 0,
                    y: -20
                }
            }
        } ) );

        $.plot( '#chart_pie2', d_pie2, $.extend( true, {}, Plugins.getFlotDefaults(), {
            series: {
                pie: {
                    show: true,
                    radius: 1,
                    label: {
                        show: true,
                        radius: 2 / 3,
                        formatter: function( label, series ) {
                            return pie2_formatter( label, series );
                        },
                        threshold: 0.1
                    }
                }
            },
            grid: { hoverable: true },
            tooltip: true,
            tooltipOpts: {
                content: '%p.0%, %s',
                shifts: {
                    x: 0,
                    y: -20
                }
            }
        } ) );
    } );
</script>

The result is both pie charts put % after the value. For the first pie chart, it displays the amount of votes along with a % symbol but the second pie chart displays the correct percent value. Is there a way to force the first pie chart to say vote/votes after instead of %?

Answer 1

This is a very old question, but I am going to assume that if I replace this:

formatter: function( label, series ) {
    return pie2_formatter( label, series );
},

with:

formatter: pie2_formatter,

it would have worked. I'm answering and marking as the answer for the sake of not having this remain an unanswered question.