Sorting
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 Sales per year 3.0 3.8 3.4 4.1 4.3 9.9 7.4 9.0 7.3 4.8 |
2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 Sales per year 3.0 3.8 3.4 4.1 4.3 9.9 7.4 9.0 7.3 4.8 |
<script src="../../codebase/dhtmlxchart.js" type="text/javascript"></script> <link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxchart.css"> <script></script> <table> <tr> <td><div id="chart1" style="width:750px;height:300px;border:1px solid #A4BED4;"></div></td> </tr> </table> <input type="button" value="sort by sales, ASC" onclick="barChart1.sort('#sales#','asc');"> <input type="button" value="sort by sales, DESC" onclick="barChart1.sort('#sales#','desc');"> <input type="button" value="sort by year, ASC" onclick="barChart1.sort('#year#','asc');"> <input type="button" value="sort by year, DESC" onclick="barChart1.sort('#year#','desc');">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; window.onload = function() { barChart1 = new dhtmlXChart({ view: "bar", container: "chart1", value: "#sales#", label: "#sales#", color: "#b3e025", gradient: true, border: false, width: 50, tooltip: { template: "#sales#"; }, xAxis: { title: "Sales per year", template: "#year#"; }, padding: { top: 20, left: 0, right: 0; } }); barChart1.parse(data, "json"); }