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

			bind("onPageLoaded", showChart)

			toolbarLocation = "hidden"

			initialize()
		}
	}

	function showChart(sender)
	{
		sender.buildChart( buildChartConfig("TotalValue"));
		sender.buildChart( buildChartConfig("AvgValue"));
	}

	function buildChartConfig( columnName )
	{
		var chartConfig = JSON.parse(JSON.stringify(DbNetLink.components["dbnetgrid1"].chartConfig)); // Deep copy of chart configuration template object

		chartConfig.height = "200px";
		chartConfig.width = "500px";
		chartConfig.chartPanel = "chartPanel1"
		
		with (chartConfig)
		{
			series.chartType = "Doughnut";
			series.xValueMember = "CategoryID";
			series.isValueShownAsLabel = true;
			series.borderColor = "black"
			series.customAttributes = { PieLabelStyle : "Outside", PieDrawingStyle : "SoftEdge" }  

			series.yValueMembers = columnName;
			title.font = {family : "verdana", size : 14};

			area3DStyle.enabled = true
			legend.enabled = true;

			switch(columnName)
			{
				case "TotalValue":
					series.name = "Total Value";
					title.text = "Total Sales By Category";
					chartPanel = "chartPanel1"
					break;
				case "AvgValue":
					series.name = "Average Value";
					title.text = "Average Sales By Category";
					chartPanel = "chartPanel2"
					break;
			}
		}

		return chartConfig;
	}
	</script>

HTML markup

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