Setting Height Dynamically for Bar and Line Chart with Grid

[Phil]

Hi:
I am creating a chart, where the chart could be a line or bar.  The # of point could be 3 or 120.  So the following issue and example are interestingly similar, I am looking to remove the white-space above and below the plot-area.
http://www.telerik.com/community/forums/aspnet-ajax/chart/white-space-above-and-below-chart-when-dynamically-setting-height.aspx
But, I have a RadGrid below my chart.  The fun part is that the 2 controls seem to partially overlay each other (not good in a production system).

<%@ Page Title="" Language="VB" MasterPageFile="~/Member.Master" AutoEventWireup="false" CodeFile="RadChartTitle.aspx.vb" Inherits="Learning_RadChartTitle" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <telerik:RadChart ID="radChart" runat="server" AutoLayout="true" Width="750" Height="450">
    </telerik:RadChart>
    <telerik:RadGrid ID="chartDataRadGrid" runat="server"
        Width="100%" ShowHeader="false" >
        <MasterTableView AutoGenerateColumns="False" ShowHeader="true">
            <Columns>
                <Telerik:GridBoundColumn DataField="Name" UniqueName="Index" HeaderText="Index" ItemStyle-HorizontalAlign="Left" HeaderStyle-HorizontalAlign="Left" Visible="true" />
                <Telerik:GridBoundColumn DataField="Value" UniqueName="V1Column" HeaderText="Value 1" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" Visible="true" />
                <Telerik:GridBoundColumn DataField="Value2" UniqueName="V2Column" HeaderText="Value 2" ItemStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" Visible="true" />
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
</asp:Content>

Code behind:

Option Explicit On
Option Strict On
'
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports System.Data
Imports Telerik.Charting
Partial Class Learning_RadChartTitle
    Inherits System.Web.UI.Page
    '
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
        Dim _table As DataTable = GetTable()
        '
        Dim _series1 As New ChartSeries()
        Dim _numOfSeries As Integer = 2
        _series1.Type = ChartSeriesType.Bar
        _series1.DataYColumn = "Value"
        _series1.Name = "Series 1"
        radChart.Series.Add(_series1)
        '
        If _numOfSeries = 2 Then
            Dim _series2 As New ChartSeries()
            _series2.Type = ChartSeriesType.Bar
            _series2.DataYColumn = "Value2"
            _series2.Name = "Series 2"
            radChart.Series.Add(_series2)
        End If
        radChart.PlotArea.XAxis.DataLabelsColumn = "Name"
        radChart.SeriesOrientation = ChartSeriesOrientation.Horizontal
        radChart.DataSource = _table
        radChart.Appearance.Dimensions.Height = Telerik.Charting.Styles.Unit.Pixel(_table.Rows.Count * 25 * _numOfSeries)
        radChart.DataBind()
        chartDataRadGrid.DataSource = _table
        chartDataRadGrid.DataBind()
    End Sub
    '
    Private Shared Function GetTable() As DataTable
        Dim table As New DataTable()
        'table columns
        table.Columns.Add("Name", GetType(String))
        table.Columns.Add("Value", GetType(Integer))
        table.Columns.Add("Value2", GetType(Integer))

        'table rows
        table.Rows.Add("Value1", 10, 20)
        table.Rows.Add("Value2", 20, 30)
        table.Rows.Add("Value3", 30, 21)
        table.Rows.Add("Value4", 40, 35)
        table.Rows.Add("Value5", 50, 50)
        table.Rows.Add("Value6", 60, 62)
        table.Rows.Add("Value7", 70, 65)
        table.Rows.Add("Value8", 80, 68)
        table.Rows.Add("Value9", 90, 71)
        table.Rows.Add("Value10", 100, 74)
        table.Rows.Add("Value11", 110, 77)
        Return table
        '
    End Function
End Class

Thanks for your help
Phil
p.s. comment all but one row of data ...

[Peshito]

Hi Phil,

Thanks for contacting Telerik Support.

As I answered you in your previous ticket thread, I made some changes to your code which included removing the AutoLayout = "true" and the "Height="450" from your markup. This way the AutoLayout is false and you can then apply your Height correctly from the code behind. I also changed the:
radChart.Appearance.Dimensions.Height = Telerik.Charting.Styles.Unit.Pixel(_table.Rows.Count * 25 * _numOfSeries)
 to
radChart.Appearance.Dimensions.Height = Telerik.Charting.Styles.Unit.Pixel(_table.Rows.Count * 13* _numOfSeries)

Hope this helps. If you need further assistance, please let me know.

I would also recommend to keep our conversation in a single thread so it would be easier for both sides to follow.

Greetings,
Peshito
the Telerik team