Charting

DbNetGrid has been integrated with Microsoft Cart Controls to allow grid data to visualized in chart format. DbNetGrid makes this process simple by proving the Chart Configuration Dialog that allows the used to select a few properties and then generated a chart based on those properties and the grid data. To enable charting the file System.Web.DataVisualization.dll must be copied from the DbNetSuite bin folder to your your application bin folder.

Chart Configuration Dialog

The key properties in the dialog are:

Auto Load

If checked then the chart will automatically load after the grid loads, otherwise a call the buildChart method will need to made.

Chart Panel

By default the chart will be displayed in it's own dialog If you want the chart to display on the same page as the grid specify the ID of the element that you want the chart to render inside in this property.

Chart Type

The type of chart to be rendered. The type of chart selected will depend very much in the nature of the grid data.

X-Axis

The grid column that will be used as the basis of the x-axis (legend) of the chart

X-Axis

The grid column(s) that will be used as the basis of the y-axis (series) of the chart. Multiple columns can be selected to create more than one series.

Pre-configuring the grid to display a chart

If you want to pre-configure the chart to be displayed when the grid loads then you will need to assign a chart configuration to the chartConfig property. The easiest way to generate a chart configuration object  is to use the Serialize button which appears when the chartSerialize property is set.

Chart Configuration Serialization Dialog

To configure the grid object simply cut and paste the chartConfig property assignment into into your grid configuration code.

Manually assigning the configuration object

While the chart configuration dialog allows most of the common chart properties to be set you can also assign additional chart control class properties manually if they are not set in the dialog. For example, the CustomAttributes collection in the Series class cannot be  assigned to in the Chart Configuration dialog but can be assigned to in the code.

	<script>
	jQuery(document).ready( init )

	function init()
	{
		var dbnetgrid1 = new DbNetGrid("dbnetgrid1");
		with (dbnetgrid1)
		{
			...
			chartConfig.height = "190px";
			chartConfig.width = "500px";
			chartConfig.chartPanel = "chartPanel1";
			chartConfig.autoLoad = true;
		
			chartConfig.series.chartType = "Doughnut";
			chartConfig.series.yValueMembers = "TotalValue";
			chartConfig.series.xValueMember = "CategoryID";
			chartConfig.series.isValueShownAsLabel = true;
			chartConfig.series.borderColor = "black"
			chartConfig.series.name = "Total Value";

			chartConfig.title.font = {family : "verdana", size : 14};
			chartConfig.title.text = "Total Sales By Category";

			chartConfig.area3DStyle.enabled = true;
			chartConfig.legend.enabled = true;
			
			chartConfig.series.customAttributes = {};
			chartConfig.series.customAttributes["PieLabelStyle"] = "Outside";
			chartConfig.series.customAttributes["PieDrawingStyle"] = "SoftEdge";

                        ...
			initialize()
		}
	}
	</script>

Run Sample

The following table shows how the chartConfig object and its child-objects are mapped to the corresponding ME Chart Control classes.