JSON

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 JSON the data will look as:

 
Please note, you can set item's id directly in JSON file

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 }
]

HTML Code

chart(json).html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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")
}