Usage Example
- HTML file
- XML Structure

Usage Example

HTML file

example.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
<html>
<head>
	<title>Integration with grid</title>
	<link rel='STYLESHEET' type='text/css' href='dhtmlxGrid/codebase/dhtmlxgrid.css'>
	<link rel='STYLESHEET' type='text/css' href='dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css'>
	<script src='dhtmlxGrid/codebase/dhtmlxcommon.js'></script>
	<script src='dhtmlxGrid/codebase/dhtmlxgrid.js'></script>
 
	<script src='dhtmlxGrid/codebase/dhtmlxgridcell.js'></script>	
 
	<script src="codebase/dhtmlxchart.js" type="text/javascript"></script>
	<link rel="STYLESHEET" type="text/css" href="codebase/dhtmlxchart.css">
	<script>
	var myChart;
	window.onload = function(){
	myChart =  new dhtmlXChart({
		view:"bar",
		color:"#66ccff",
		gradient:"3d",
		container:"chart_container",
	        value:"#data0#",
		label:"#data0#",
		radius:3,
		tooltip:{
			template:"#data0#"
		},
		width:30,
		origin:0,
		yAxis:{
			start:-1000,
			step: 500,
			end:1500	
		},
		xAxis:{
			template:function(){
				return ""
			}
		},
		border:false
	});
 
	function refresh_chart(){
		myChart.clearAll();
		myChart.parse(mygrid,"dhtmlxgrid");
	};
 
	mygrid = new dhtmlXGridObject('gridbox');
	mygrid.setImagePath('../../../dhtmlxGrid/codebase/imgs/');
	mygrid.setSkin("dhx_skyblue")
	mygrid.loadXML("xml/gridData.xml",refresh_chart);
	mygrid.attachEvent("onEditCell",function(stage){
		if (stage == 2)
			refresh_chart();
		return true;
	});
    }
</script>
</head>
 
<body>
 
	<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
	<hr>
 
	<div id="chart_container" style="width:500px;height:300px;"></div>
 
</body>
</html>

XML Structure

gridData.xml

<rows>
	<head>
		<column width="50" type="dyn" align="right" sort="str">Sales</column>
		<column width="150" type="ed" align="left" sort="str">Book Title</column>
		<column width="100" type="ed" align="left" sort="str">Author</column>
		<column width="80" type="price" align="right" sort="str">Price</column>
		<column width="80" type="ch" align="center" sort="str">In Store</column>
		<column width="200" type="ro" align="center" sort="str">Date of Publication</column>
 
		<settings>
			<colwidth>px</colwidth>
		</settings>
	</head>
 
<row id="1">
<cell>-500</cell>
<cell>A Time to Kill</cell>
<cell>John Grisham</cell>
<cell>12.99</cell>
<cell>1</cell>
<cell>05/01/1998</cell>
</row>
 
... 
 
<row id="11">
<cell>-150</cell>
<cell>Alice in Wonderland</cell>
<cell>Lewis Carroll</cell>
<cell>4.15</cell>
<cell>1</cell>
<cell>01/01/1999</cell>
</row>
</rows>