?

Log in

No account? Create an account

Peter Rogers's Blog
Artist-in-Residence at Chez Firth

Wednesday (3/6/13) 5:18pm - ... wherein it's pie time, time for pie.

Here's yet another plugin -- this one creates pie charts.

So, you enter something like this:
   

[pie monkeys=10 cats=15 velociraptors=1 dogs=33]


And you get something like this:

   

(This is basically a front-end for the Flot plugin for WordPress, but it was still fun putting together all the moving pieces.)



<?php
/*
Description:         This lets you display custom data in a pie chart via the shortcode 'pie'.
Author:                 Peter Rogers
License:                 GPL3
*/

if (!class_exists("PieMaker")) {
    class PieMaker {
        function PieMaker()
        {
            add_shortcode('pie', array($this,'MakePie'));
        }

        function GetPlaceholderName()
        {
            static $pieCount= 0;
            $pieCount++;
            return "placeholder_pie_" . $pieCount;
        }

        function MakePie($attributes) {
            $placeholder= $this->GetPlaceholderName();
// ----
echo
'<div id="flot-container">
    <script type="text/javascript" src="' . includes_url( $path ) . 'js/jquery/jquery.js"></script>
    <script type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.js"></script>
    <script type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.resize.js"></script>
    <script type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/jquery.flot.pie.js"></script>
    <script type="text/javascript" src="' . plugins_url( $path ) . '/flot-for-wp/flot/excanvas.min.js"></script>
    <link href="' . plugins_url( $path ) . '/flot-for-wp/flot/layout.css" rel="stylesheet" type="text/css">
    <div id="'. $placeholder . '" style="width:95%; height:85%; max-width:100%; margin:auto;"></div>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            var data=[];
';
            foreach ($attributes as $name => $value)
                echo "
            data.push({label: '" . $name . "', data: " . $value . "});";

echo
'

            var placeholder_pie = $("#'. $placeholder . '");

            var plot = $.plot(placeholder_pie, data,
            {
                series: {
                    pie: {
                        show: true
                    }
                }
            });
        }
    );
    </script>
</div>';
        }
    }
};

new PieMaker();

Tags: ,
Mood: [mood icon] contemplative · Music: none
Previous Entry Share Next Entry