<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>AreaChart</title> <script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script> <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css"> <script> var data = [ { sales:"5.0",sales1:"3.4",sales2:"2.1", year:"2000" }, { sales:"2.8",sales1:"4.8",sales2:"0.3", year:"2001" }, { sales:"1.1",sales1:"4.4",sales2:"2.9", year:"2002" }, { sales:"4.4",sales1:"5.5",sales2:"2.6", year:"2003" }, { sales:"2.6",sales1:"6.0",sales2:"1.4", year:"2004" }, { sales:"4.1",sales1:"5.7",sales2:"1.1", year:"2005" } ] window.onload = function(){ var AreaChart = new dhtmlXChart({ view:"stackedArea", container:"chart_container", value:"#sales#", alpha:0.6, gradient:true, xAxis:{ title:"Year", template:"#year#" }, yAxis:{ title:"Sales per year" } }) AreaChart.addSeries({ value:"#sales1#", color:"#45abf5", label:"#sales1#" }); AreaChart.addSeries({ value:"#sales2#", label:"#sales2#", color:"#3590d0" }); AreaChart.parse(data,"json"); } </script> </head> <body> <div id="chart_container" style="width:450px;height:300px;border:1px solid #A4BED4;"></div> </body> </html>