DbNetSuite Sample

Include the client JavaScript & CSS libraries

	<link rel="stylesheet" type="text/css" href="dbnetsuite.css.ashx" />
	<script language="JavaScript" src="dbnetsuite.js.ashx"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

Client-side configuration script

	<script>
	google.load("visualization", "1", {packages:["corechart"]});  
	google.setOnLoadCallback(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"
				)

			toolbarLocation = "hidden";
			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",renderChart);
			
			initialize()
		}
	}
	
	function renderChart(grid)
	{
		var seriesData = grid.getDataArray(['CategoryID','TotalValue']);
		configureChart(seriesData,'chartPanel1','Total Order Value By Category');
		seriesData = grid.getDataArray(['CategoryID','AvgValue']);
		configureChart(seriesData,'chartPanel2','Average Order Value By Category');
	}

	function configureChart(seriesData, elementId, title)	
	{

		var data = new google.visualization.DataTable();  
        data.addColumn('string', 'Task');  
        data.addColumn('number', 'Hours per Day');  

        data.addRows(seriesData.length);  

		for (var i=0; i < seriesData.length; i++)
		{
	        data.setValue(i, 0, seriesData[i][0]);  
		    data.setValue(i, 1, seriesData[i][1]);
		}

        var chart = new google.visualization.PieChart(document.getElementById(elementId));  
        chart.draw(data, {width: 600, height: 600, title:title});  
	}				
	</script>
		
	</head>
	<body>
	
	</script>

HTML markup

<table>
	<tr>
		<td colspan="2">
			<div id="dbnetgrid1"></div>
		</td>
	</tr>
	<tr>
		<td>
			<div id="chartPanel1"></div>
		</td>
		<td>
			<div id="chartPanel2"></div>
		</td>
	</tr>
</table>