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 XML the data will look as:
salesData.xml
<?xml version="1.0" encoding="UTF-8"?> <data> <item id="1"> <sales> 9.5 </sales> <year> 2006 </year> </item> <item id="2"> <sales> 8.6 </sales> <year> 2007</year> </item> <item id="3"> <sales> 6.7 </sales> <year> 2008 </year> </item> <item id="4"> <sales> 4.9 </sales> <year> 2009 </year> </item> <item id="5"> <sales> 6.2 </sales> <year> 2010 </year> </item> </data>
chart(xml).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> window.onload=function(){ dhx.ui({ container:"chart_container", view:"chart", id:"salesPie", type:"pie3D", value:"#sales#", label:"#year#", height:30 }) $$('salesPie').load("xml/salesData.xml", "xml") } </script> </head> <body> <div id="chart_container" style="width:450px;height:300px;border:0px solid #A4BED4;float:left;margin-right:20px"></div> </body> </html>