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 JSArray the data will look as:
salesData.js
[ [ 9.5, "2006" ], [ 8.6, "2007" ], [ 6.7, "2008" ], [ 4.9, "2009" ], [ 6.2, "2010" ] ]
Data in JS array hasn’t got names for values. Values are accessible as (“data0”, “data1”, …)
chart(jsarray).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 = [ [ 9.5, "2006" ], [ 8.6, "2007" ], [ 6.7, "2008" ], [ 4.9, "2009" ], [ 6.2, "2010" ] ] window.onload=function(){ dhx.ui({ container:"chart_container", view:"chart", id:"salesPie", type:"pie3D", value:"#data0#", label:"#data1#", height:30 }) $$('salesPie').parse(salesData, "jsarray") } </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:"#data0#", label:"#data1#", height:30 }) $$('salesPie').load("salesData.js","jsarray") }