Setting Height Dynamically for Bar and Line Chart with Grid

Thread is closed for posting
2 posts, 0 answers
  1. Phil
    Phil avatar
    273 posts
    Member since:
    Jul 2008

    Posted 07 Nov 2011 Link to this post

    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 ...
  2. Peshito
    Admin
    Peshito avatar
    497 posts

    Posted 10 Nov 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top