Light Weight ASP.NET Animated Graph Control Bookmark   Rating: 4.50/5 1 2 3 4 5 2 people have rated this article   Posted On: Jun 03 2009 Views: 594 BookMarked: 3 Downloads: 88

                        BarChart Control is purely HTML and javascript based graph. It creates graph on  the fly using ASP.NET. This control has lots of features to customize the look and feel. Also it supports javascript animation for the chart bars. So create your own graph by setting WaterMarkUrl, PlotAreaStyles,ChartAreaStyle properties. 

BarChart control accepts inputs from datatable. To learn more, please go through the following properties and setting:

Click Here To See the Graph Demo

Figure 1: Graph Properties

Properties

CategoryAxisField

The field in the datasource which provides Y axis label.

ValueAxisField

The field in the datasource which provides X axis label.

Figure 2: Randomized Colors

CategoryAxisFont

Font of the Y axis Label

ValueAxisFont

Font of the X axis Label

AutoDataBackColor

This enables the control to randomly assign background color for each bar in the chart.

DataBarBackColor

If AutoDataBackColor is set to false, then AutoDataBackColor will be used as the background color for each bar in the chart.

DataBarBorderColor

Color of the border around the Chart Bar.

DataBarBorderWidth

Width of the border around the Chart Bar.

DataBarBorderStyle

Style of the border around the Chart Bar.

DataBarWidth

Width of the individual bar in the chart.

Figure 2: Graph PlotAreaStyle and ChartAreaStyle Settings

DataBarMaxHeight

Maximum height of a bar in the chart. The highest Y axis value will have it.

DataBarPadding

Padding between two bars in the chart.

DataSource

The DataTable will be used as the data source.

Figure 4: Graph with water mark 

ShowChartTitle

Whether to show chart’s title.

ChartTitle

Title of the chart.

ChartStyle

Style of the Chart Title.

EnableAnimation

Enables JavaScript animation for the chart bars.

ShowLegend

Whether to show chart’s legend.

LegendData

Settings of a Legend Display Information. It would display X axis/Y axis/Bar Colors info on the Legend area.

LegendDataRepeatColumns

The number of columns is used for legend data layout.

ShowChartArea

Whether to show the style around the plot area.

WaterMarkUrl

Url of the image to shown as background of plot area.

WaterMarkPosition

Alignment of the plot area’s background-image.

 Click Here To See the Graph Demo