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

Taxonomy upgrade extras: 

Comments

I'm really happy that finally i found what i was looking for , and i want to thank you because this pie chart code was very useful for me to be done in my project

Thanks for sharing a nice informative post...........

Hii ,

Thanks for good tutorial. I embedded this code to my application and its working fine.
But i want these two things should be there in my application.

1. right now background color of pie chart is WHITE but my background color is something else"SKYBLUE", so its not looking proper in that page.

2. i want to display legends (PHP , PYTHON,... )etc at left side verically.

Could you help me in this .

I am using same above code for PIE CHART.

Thanks,
Anand

dojox.charting has several themes to choose from. In the article, I chose the MiamiNice theme. Download Dojo, extract the archive and take a look at the contents of dojox/charting/themes directory. I could see these themes listed:

  • Adobebricks
  • BlueDusk
  • Dollar
  • GreySkies
  • MiamiNice
  • PurpleRain
  • Shrooms
  • Wetland
  • Algae
  • CubanShirts
  • Grasshopper
  • IndigoNation
  • Midwest
  • RoyalPurples
  • Tufte
  • Bahamation
  • Desert
  • Grasslands
  • Ireland
  • Minty
  • SageToLime
  • WatersEdge

To use a different theme, dojo.require the theme name. I will use GreySkies in this example.

dojo.require("dojox.charting.themes.GreySkies");

While setting the theme to the chart, specify the theme name.

ar programmersChart = new dc.Chart2D("programmersChart");
programmersChart.setTheme(dc.themes.GreySkies).addPlot("default", {
type: "Pie",
font: "normal normal 8pt Tahoma",
fontColor: "black",
labelOffset: -30,
radius: 80
});

The legend widget has a property horizontal. You can set it to false to render the legend vertically.

var programmersLegend = new dojox.charting.widget.Legend({
chart: programmersChart,
horizontal: false
},
"programmersLegend");

You can use CSS to position the widgets in your layout.


In the above snippet, I have embedded the chart and legend widgets within the div elements with ids legend_container and chart_container respectively. You can use float: left to position them side by side.

I have modified the original file and uploaded to the demo section.

yes css+div i can make it

Hi

Thanks so much this really helped a lot.

But I am having difficulty getting multiple pie charts to load.

Please advise

Thanks

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.