<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Donut chart</title> <script src="../codebase/dhtmlxchart.js" type="text/javascript"></script> <link rel="STYLESHEET" type="text/css" href="../codebase/dhtmlxchart.css"> <script> var data = [ { sales:"4.3", year:"2001" ,color:"#80ff7a"}, { sales:"9.9", year:"2002" ,color:"#bdff33"}, { sales:"7.4", year:"2003" ,color:"#ff9e2a"}, { sales:"9.0", year:"2004" ,color:"#ff561b"}, { sales:"7.3", year:"2005" ,color:"#ff71be"}, { sales:"6.8", year:"2006" ,color:"#ffea69"} ]; window.onload = function(){ var chart = new dhtmlXChart({ view:"donut", container:"chart", color:"#color#", value:"#sales#", pieInnerText: function(obj){ var sum = chart.sum("#sales#"); return Math.round(parseFloat(obj.sales)/sum*100)+"%"; }, legend:{ width: 75, align:"right", valign:"middle", marker:{ type:"square", width:15, radius:2 }, template:"#year#" }, shadow:false }); chart.parse(data,"json"); } </script> </head> <body > <div id="chart" style="width:402px;height:260px;border:1px solid #A4BED4;"></div> </body> </html>