Chart DataGrid guide for ASP.NET AJAX, C#, VB.NET, provide rich aspx sample code for data grid's size, style, position, text

Chart DataGrid in ASP.NET AJAX

Home > How to > Chart Data Table

Information to Data Grid

In real life application, we may need to display a table of data in the chart and we call this data grid. Typically, the data grid is hidden seating at the bottom, by default, in the chart. But you are also able to make it visible in the chart. What's more, the general layout and appearance style of chart data table can be fully customized. For instance, you can decide how large it will be created, where it will be placed and what color it will be filled.

And from this online tutorial, you will find sample ASP.NET code for setting each attribute of chart data table respectively. Any advice or suggestion is welcomed in the process of customizing the chart data grid settings. Please see DataGrid in chart online demo

Data Grid Settings

The settings for data table are conducted from following five aspects, which are boarder, size, fill style, position, format and text style. And here we will offer detailed asp.net coding guidance for each parts in following text.

Customize Data Grid Border

You are free to hide or display the border of chart data grid. If you want to display it, you can choose your desired penstyle, like solid. Besides, you are able to create it with your customized color and width.


<Diagram>                       
<DataGrid Visible="true" 
StyleSet-Border-Visible="true"
 StyleSet-Border-PenStyle="Solid" 
StyleSet-Border-Color="Red" 
StyleSet-Border-Width="1" ></DataGrid>
</Diagram>

Define the Data Grid Size

The size of chart data grid can be either auto controlled or fully customized. By default, the columns of the table is equal to the chart series number, and the data in the table has the same order and group to the data series. In general, we will use the property autosize. If you turn this property on, the data grid will be automatically resized based on the data. Of course, if you want to resize the grid chart with fully tailored attribute values, like width, height, margin and padding, this ASP.NET AJAX can also meet your needs.


<Diagram>                       
<DataGrid Visible="true" StyleSet-Dimensions-IsAutoSize="true" ></DataGrid>
</Diagram>

Set Data Grid Fill Style

The settings in this part cover two aspects. One is fill type and the other is color. Editing the fill type, the html chart will redraw the chart graph to look better. And according to the different color, you can comparing the chart data more easier.


<Diagram>                       
<DataGrid Visible="true" StyleSet-Fill-FillMode="Solid" StyleSet-Fill-PrimaryColor="AliceBlue" ></DataGrid>
</Diagram>

Define the Position of Data Grid

Using the property AlignedPosition, users can make the chart data grid be placed at specified align. If you want to position it at your desired place, you can use the application of X & Y axis.


<Diagram>                       
<DataGrid Visible="true" StyleSet-Position-AlignedPosition="Bottom" ></DataGrid>
</Diagram>

Set Text Style of Data Grid

The text style within the data grid can be also fully customized. We here offer rich text fonts and text color options for users to design the text style that they want.


<Diagram>                       
<DataGrid Visible="true" StyleSet-TextSurface-Color="Black"></DataGrid>
</Diagram>