<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>PieChart: Initiazation</title> <script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script> <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css"> </head> <body > <h1>BarChart: Initiazation</h1> <table> <tr> <td></td> <td></td> </tr> <tr> <td><div id="chart1" style="width:950px;height:300px;border:1px solid #A4BED4;"></div></td> </tr> </table> <script> var data = [ { sales:"3.0", year:"2000" }, { sales:"3.8", year:"2001" }, { sales:"3.4", year:"2002" }, { sales:"4.1", year:"2003" }, { sales:"4.3", year:"2004" }, { sales:"9.9", year:"2005" }, { sales:"7.4", year:"2006" }, { sales:"9.0", year:"2007" }, { sales:"7.3", year:"2008" }, { sales:"4.8", year:"2009" } ]; var barChart1 = new dhtmlXChart({ view:"bar", container:"chart1", value:"#sales#", label:"#sales#", color:"#66cc33", width:50, tooltip:{ template:"#sales#" }, xAxis:{ title:"Sales per year", template:"#year#" } }); barChart1.parse(data,"json"); var counter = 2010; function add_new () { barChart1.add({ year:counter, sales:(Math.random()*5).toFixed(2) }); counter++; } function delete_first(){ barChart1.remove(barChart1.first()); } </script> <input type="button" value="add" onclick="add_new()"> <input type="button" value="delete" onclick="delete_first()"> </body> </html>