Create Awesome Pie Charts From PHP Arrays Using Dojo Charting

In the previous articles I've written about using Dojo date pickers and filteringSelect widgets. If you are a PHP programmer with little or no JavaScript experience, you can take advantage of the integration of Zend Framework and Dojo Toolkit to build great user interfaces without writing a single line of JavaScript.

In this article I will demonstrate how to create awesome pie charts from simple PHP arrays. Check out the demo page to see how our pie chart looks. We draw a pie chart of the types programmers in an obviously fictitious development team.

Let's begin coding.

Start with the routine HTML markup.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
Render awesome pie charts from PHP arrays using Dojo charting - techchorus.net
</title>

Like our previous Dojo examples, include the tundra stylesheet and Dojo library from Google CDN.

<link rel="stylesheet" type="text/css" 
href="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dijit/themes/tundra/tundra.css">
 
<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js"
djConfig="parseOnLoad: true">
</script>

DojoX, a part of Dojo Toolkit, provides the charting and other nice widgets and utilities.

Include the necessary DojoX code using the powerful dojo.require statements.

<script type="text/javascript">
        dojo.require("dojox.charting.Chart2D");
        dojo.require("dojox.charting.plot2d.Pie");
        dojo.require("dojox.charting.action2d.Highlight");
        dojo.require("dojox.charting.action2d.MoveSlice");
        dojo.require("dojox.charting.action2d.Tooltip");
        dojo.require("dojox.charting.themes.MiamiNice");
        dojo.require("dojox.charting.widget.Legend");

We haven't closed the script tag yet.

When the page has finished loading, draw the pie chart in the "programmersChart" DOM node.

dojo.addOnLoad(function() {
            var dc = dojox.charting;
            var programmersChart = new dc.Chart2D("programmersChart");
            programmersChart.setTheme(dc.themes.MiamiNice).addPlot("default", {
                type: "Pie",
                font: "normal normal 8pt Tahoma",
                fontColor: "black",
                labelOffset: -30,
                radius: 80
            });

Let's put our development team in a simple PHP array. The array keys represent the programming languages and the values number of programmers in the category.

<?php
    $programmers = array(
        'PHP'=>20,
        'JavaScript'=>6,
        'Python'=>12,
        'Java'=>4,
        'Others'=>3
    );
?>

Let's write a PHP function to convert the array into JSON. You can choose to embed this PHP code wherever you want in the script.

<?php
function array_to_chart_json($array) {
        $toReturn = array();
        foreach ($array as $key=>$value) {
            $toReturn[] = array(
                'y'=>$value,
                'text'=>$key,
                'stroke'=>'black',
                'tooltip'=>$key
            );
        }
        return json_encode($toReturn);
    }

?>

The JSON encoding of our PHP array looks like

[
{"y":20,"text":"PHP","stroke":"black","tooltip":"PHP"},
{"y":6,"text":"JavaScript","stroke":"black","tooltip":"JavaScript"},
{"y":12,"text":"Python","stroke":"black","tooltip":"Python"},
{"y":4,"text":"Java","stroke":"black","tooltip":"Java"},
{"y":3,"text":"Others","stroke":"black","tooltip":"Others"}
]

Add the programmers team series to the programmersChart object we created earlier.

programmersChart.addSeries("Series A", 
    <?php echo array_to_chart_json($programmers); ?>);

Add some nice animation effects to the chart and render it.

 var anim_a = new dc.action2d.MoveSlice(programmersChart, "default");
            var anim_b = new dc.action2d.Highlight(programmersChart, "default");
            var anim_c = new dc.action2d.Tooltip(programmersChart, "default");
            programmersChart.render();

Create the legend. Close the script and head tags.

var programmersLegend = new dojox.charting.widget.Legend({
                chart: programmersChart
            },
            "programmersLegend");
        });
</script>
 
</head>

Write the body section of the web page. We set the body tag class to "tundra" to make use of the tundra style sheet of Dojo. In the "programmersChart" div, DOM node, we render the pie chart. In the "programmersLegend" div, we render the legend.

<body class="tundra">
        <div id="programmersChart" style="width: 300px; height: 300px;">
        </div>
        <div id="programmersLegend">
        </div>
    </body>
</html>

You can download the entire script from the Code Album github.com repository. To enable copy pasting, I'm posting the entire script below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Render awesome pie charts from PHP arrays using Dojo charting - techchorus.net</title>
        <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dijit/themes/tundra/tundra.css">
 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.3.2/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dojox.charting.Chart2D");
        dojo.require("dojox.charting.plot2d.Pie");
        dojo.require("dojox.charting.action2d.Highlight");
        dojo.require("dojox.charting.action2d.MoveSlice");
        dojo.require("dojox.charting.action2d.Tooltip");
        dojo.require("dojox.charting.themes.MiamiNice");
        dojo.require("dojox.charting.widget.Legend");
 
        dojo.addOnLoad(function() {
            var dc = dojox.charting;
            var programmersChart = new dc.Chart2D("programmersChart");
            programmersChart.setTheme(dc.themes.MiamiNice).addPlot("default", {
                type: "Pie",
                font: "normal normal 8pt Tahoma",
                fontColor: "black",
                labelOffset: -30,
                radius: 80
            });
<?php
    $programmers = array(
        'PHP'=>20,
        'JavaScript'=>6,
        'Python'=>12,
        'Java'=>4,
        'Others'=>3
    );
 
    function array_to_chart_json($array) {
        $toReturn = array();
        foreach ($array as $key=>$value) {
            $toReturn[] = array(
                'y'=>$value,
                'text'=>$key,
                'stroke'=>'black',
                'tooltip'=>$key
            );
        }
        return json_encode($toReturn);
    }
 
?>
            programmersChart.addSeries("Series A", <?php echo array_to_chart_json($programmers); ?>);
            var anim_a = new dc.action2d.MoveSlice(programmersChart, "default");
            var anim_b = new dc.action2d.Highlight(programmersChart, "default");
            var anim_c = new dc.action2d.Tooltip(programmersChart, "default");
            programmersChart.render();
            var programmersLegend = new dojox.charting.widget.Legend({
                chart: programmersChart
            },
            "programmersLegend");
        });
    </script>
 
 
 
    </head>
 
    <body class="tundra">
        <div id="programmersChart" style="width: 300px; height: 300px;">
        </div>
        <div id="programmersLegend">
        </div>
    <p>This is a demo page to illustrate how to create awesome pie charts from PHP arrays using the Dojo Toolkit JavaScript library. Visit the orignial article at http://techchorus.net/create-awesome-pie-charts-php-arrays-using-dojo-charting
    </p>
    </body>
</html>

That brings us to the end of the article. Power up your web application with awesome charts using the Dojo Toolkit. Share your experience with us.

Reference:
Dojo Toolkit
Dojo Campus - Dojo documentation

Bookmark/Search this post with: