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);

	var reportType = "month"
	var columnTemplate = "([Order Details].[Unit Price]*Quantity)*(1-ABS(SIGN(DatePart(mm,[Order Date])-{period}))) AS period{period}"

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			connectionString = "SamplesDatabaseSqlServerCE"
			fromPart = "Customers " +
				"INNER JOIN Orders ON Customers.[Customer ID] = Orders.[Customer ID] " +
				"INNER JOIN [Order Details] ON Orders.[Order ID] = [Order Details].[Order ID] " +
				"INNER JOIN [Products] ON Products.[Product ID] = [Order Details].[Product ID] " +
				"INNER JOIN [Categories] ON Categories.[Category ID] = Products.[Category ID]"

			var cols = ["Categories.[Category Name]"]
			var labels = ["Category"]

			for ( var m = 1; m <= 12; m++ )
			{
				cols.push( columnTemplate.replace(/{period}/g,m) )
				setColumnProperty("period" + m, "aggregate","sum")
				setColumnProperty("period" + m, "format","C")
				labels.push(DbNetLink.dateOptions.monthNames[m-1])
			}

			cols.push( "[Order Details].[Unit Price]*Quantity as total" )
			labels.push( "Total" )
			setColumnProperty("total", "aggregate","sum")
			setColumnProperty("total", "format","C")

			setColumnExpressions(cols)
			setColumnLabels(labels)
			toolbarLocation = "hidden"

			groupBy = true;

			bind("onPageLoaded", renderChart)
			initialize();
		}
	}
	
	function renderChart(grid,args) {
		var data = grid.getDataArray();
	
		var dataTable = new google.visualization.DataTable(); 
        dataTable.addColumn('string', 'Month'); 

		for (var i = 0; i < data.length; i++)
		{
			dataTable.addColumn('number', data[i][0]); 
		}

		var dataRows = [];

		for ( var m = 1; m <= 12; m++ ) {
			var a = []

			a.push( DbNetLink.dateOptions.monthNames[m-1] )

			for (var i = 0; i < data.length; i++)
			{
				a.push( data[i][m] )
			}

			dataRows.push(a);
		}


        dataTable.addRows(dataRows); 
 
        var chart = new google.visualization.AreaChart(document.getElementById('chartPanel')); 
        chart.draw(dataTable, {width: 1200, height: 600, title: 'Monthly Sales By Category', 
                          hAxis: {title: 'Month', titleTextStyle: {color: '#FF0000'}} 
                         }); 

		}
	

	</script>

HTML markup

	<div id="dbnetgrid1"></div>
	<div id="chartPanel"></div>