As initial data we'll take sales information of some little company:
Year | 2006 | 2007 | 2008 | 2009 | 2010 |
---|---|---|---|---|---|
Sales | 9.5 | 8.6 | 6.7 | 4.9 | 6.2 |
In JSON the data will look as:
salesData.json
[ { sales: 9.5, year: 2006 }, { sales: 8.6, year: 2007 }, { sales: 6.7, year: 2008 }, { sales: 4.9, year: 2009 }, { sales: 6.2, year: 2010 } ]
chart(json).html
<!DOCTYPE HTML> <html> <head> <script src="../../../codebase/touchui.js" type="text/javascript"></script> <link rel="STYLESHEET" type="text/css" href="../../../codebase/touchui.css"> <script> var salesData = [ { sales: 9.5, year: 2006 }, { sales: 8.6, year: 2007 }, { sales: 6.7, year: 2008 }, { sales: 4.9, year: 2009 }, { sales: 6.2, year: 2010 } ]; window.onload=function(){ dhx.ui({ container:"chart_container", view:"chart", id:"salesPie", type:"pie3D", value:"#sales#", label:"#year#", height:30 }) $$('salesPie').parse(salesData, "json") } </script> </head> <body> <div id="chart_container" style="width:450px;height:300px;border:0px solid #A4BED4;float:left;margin-right:20px"></div> </body> </html>
If you use data from external file - remove the method parse and add load, where specify the path to the desired data file.
window.onload=function(){ dhx.ui({ container:"chart_container", view:"chart", id:"salesPie", type:"pie3D", value:"#sales#", label:"#year#", height:30 }) $$('salesPie').load("salesData.json", "json") }