CSV

Initial Data

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

Configuration

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”, …)

HTML Code

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")
}