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 CSV the data will look as:
salesData.csv
9.5, 2006 8.6, 2007 6.7, 2008 4.9, 2009 6.2, 2010
Data in CSV hasn’t got names for values. Values are accessible as (“data0”, “data1”, …)
chart(csv).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:"#data0#", label:"#data1#", height:30 }) $$('salesPie').parse("9.5, 2006 \n 8.6, 2007 \n 6.7, 2008 \n 4.9, 2009 \n 6.2, 2010", "csv") } </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.csv", "csv") }