Include the client JavaScript & CSS libraries

	<link rel="stylesheet" type="text/css" href="dbnetsuite.css.ashx" />
	<script language="JavaScript" src="dbnetsuite.js.ashx"></script>

Client-side configuration script

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabase"
			fromPart = "((Orders inner join [Order Details] on Orders.OrderID = [Order Details].OrderID) inner join Products on Products.ProductId = [Order Details].productid)"

			setColumnExpressions(
				"Products.CategoryID",
				"([Order Details].UnitPrice * [Order Details].Quantity) as TotalValue",
				"([Order Details].UnitPrice * [Order Details].Quantity) as AvgValue"
				)

			setColumnProperty("CategoryID","label","Category")
			setColumnProperty("CategoryID","lookup","select CategoryID, CategoryName from categories")

			setColumnProperty("TotalValue","label","Total Value")
			setColumnProperty("TotalValue","format","C")
			setColumnProperty("TotalValue","aggregate","Sum")

			setColumnProperty("AvgValue","label","Avg Value")
			setColumnProperty("AvgValue","aggregate","Avg")
			setColumnProperty("AvgValue","format","C")
			
			groupBy = true

			chartConfig = {"autoLoad":true,"chartPanel":"chartPanel1","series":{"chartType":"Doughnut","xValueMember":"CategoryID","isValueShownAsLabel":true,"borderColor":"DarkSlateGray","yValueMembers":"TotalValue","name":"Total Value","palette":"None"},"legend":{"enabled":true,"borderDashStyle":"NotSet","borderWidth":"1","legendStyle":"Column","tableStyle":"Auto","docking":"Right"},"legends":[],"title":{"font":{"family":"verdana","size":14},"text":"Total Sales By Category","Font":{"family":"verdana","size":"14"},"docking":"Top","alignment":"TopLeft"},"titles":[],"area3DStyle":{"enabled":true,"enable3D":false,"inclination":"0","isClustered":false,"isRightAngleAxes":false,"lightStyle":"None","perspective":"0","pointDepth":"100","pointGapDepth":"100","rotation":"0"},"borderSkin":{"skinStyle":"None"},"chartArea":{"backGradientStyle":"None","backHatchStyle":"None","borderDashStyle":"NotSet","borderWidth":"1"},"height":"500px","width":"500px","backGradientStyle":"None","backHatchStyle":"None"}
			
			initialize()
		}
	}
	</script>

HTML markup

<table>
	<tr>
		<td style="vertical-align:top">
			<div id="dbnetgrid1"></div>
		</td>
		<td style="vertical-align:top">
			<div id="chartPanel1" style="border:1pt solid silver"></div>
		</td>
	</tr>
</table>