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 language="JavaScript" src="../../js/highcharts.js"></script>

Client-side configuration script

	<script>
	jQuery(document).ready( 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"]
			
			var chartSeriesArray = [];

			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])
				
				var chartSeries = {};
				chartSeries.chartType = "Spline";
				chartSeries.xValueMember = "Category Name";
				chartSeries.yValueMembers = "period" + m.toString();
				chartSeries.name = DbNetLink.dateOptions.monthNames[m-1];
				
				chartSeriesArray.push(chartSeries)
			}

			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;
			chartConfig = {
				"autoLoad":true,
				"chartPanel":"chartPanel1",
				"series":chartSeriesArray,
				"legend":{
					"enabled":true,
					"borderDashStyle":"NotSet",
					"borderWidth":"1",
					"legendStyle":"Column",
					"tableStyle":"Auto",
					"docking":"Right"
				},
				"legends":[],
				"title":{
					"font":{
						"family":"verdana",
						"size":14
					},
					"text":"Monthly Sales By Category",
					"docking":"Top",
					"alignment":"TopCenter"
				},
				"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":"300px",
				"width": screen.availWidth.toString() + "px",
				"backGradientStyle":"None",
				"backHatchStyle":"None"
			}

			initialize();
		}
	}

	</script>

HTML markup

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