Dojo Pie Chart Sample

HTML

<link rel="stylesheet" href="      &lt;link rel=&quot;stylhttp://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"
/>
<div class='claro'>
    SMTP Delivery Status Notifications Chart
    
    <br/>
    <br/>
    <div id="reportChartDiv" style='display:block; clear:none; z-index:999; width:100%; height:100%;' >
        
    </div>

    <div id='reportChartLegendDiv' ></div>


</div>

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.CubanShirts");
dojo.require("dojox.charting.widget.SelectableLegend");
dojo.require("dojox.charting.widget.Legend");

function filterReportPrototype(k,o){
return true; //see JSLint suggestion for the  for ( k in object) cycle
}

var reports={
               
    failure:{count:4,color:'red',fontColor:'red'},
    expanded:{count:24,color:'lightgreen',fontColor:'black'},
    delivered: {count:14,color:'green',fontColor:'green'},
    relayed:{count:10,color:'lightyellow',fontColor:'black'},
    delayed:{count:1,color:'yellow',fontColor:'black'},
    notAvailable:{count:50,color:'white',fontColor:'black'}

};

function dsnChart(reports){



    
var dsnArr=[];

   
    
for (var k in reports){
    if (filterReportPrototype(k,reports)){
    dsnArr.push( {
        y: reports[k].count,
        text: k,
        tooltip: k +" : "+reports[k].count,
        fontColor: reports[k].fontColor,
        color: reports[k].color
        });
    }
}
    
    dsnArr=dsnArr.reverse(); //more elegant to have notAvailable bottom, but more pratical to populate it in this way (see Ajax method, and the push() in the previous for...
    
console.debug(dsnArr);

    var c = new dojox.charting.Chart2D("reportChartDiv");
    c.addPlot("default", {
        type: "Pie",
        radius: 60,
        labelOffset: -40,
        shadow:true,
        stroke:"gray",
        labelWiring: "cccc",
        labelStyle: "columns"
    }).setTheme(dojox.charting.themes.CubanShirts);
    //   c.addSeries("failure", [1, 1, 4, 2, 1, 6, 4, 3],{plot: "pie", stroke: {color:"blue"}, fill: "lightblue"});
    c.addSeries("DSN", dsnArr);
    var a1 = new dojox.charting.action2d.Tooltip(c, "default");
    var a = new dojox.charting.action2d.MoveSlice(c,...