<!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"); function filter_year(){ barChart1.filter(function(obj){ return obj.year >2005; }) } function filter_sales(){ barChart1.filter(function(obj){ return obj.sales < 8; }) } </script> <input type="button" value="show all" onclick="barChart1.filter();"> <input type="button" value="show year > 2005" onclick="filter_year()"> <input type="button" value="show sales < 8" onclick="filter_sales()"> </body> </html>