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",
					"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>