Solved Get dynamically added chart to fit size of the screen

Posted on 2014-08-07
Last Modified: 2014-08-11
I am using the following code to dynamically add a chart to my web page
How can I get the width of the chart to automatically match the size of the screen?

    Sub oChart_Actualv_Budget(ByVal oConnectionString As String, ByVal oSQL As String, ByVal oFilter As String, ByVal oTitle As String)

            'First build GridView
            Dim oGridView As New GridView
            Dim dt As DataTable = SQL_Data_Table.GetSQLDataTable(oConnectionString, oSQL)
            If oFilter <> "" Then
                dt.DefaultView.RowFilter = oFilter
            End If
            oGridView.DataSource = dt
            oGridView.Visible = False

            ' Initialize the Chart object    
            Dim chart1 As New Chart()
            chart1.ID = "chart1"

            'Add to do code here

            ' Initialize objects and elements
            Dim chartArea1 As New ChartArea()
            Dim legend1 As New Legend()
            Dim series1 As New Series()
            Dim series2 As New Series()
            'Dim series3 As New Series()

            ' Set the Chart Properties
            chart1.Width = 1400
            'chart1.Height = 340

            chart1.Palette = ChartColorPalette.Light
            chart1.BackColor = System.Drawing.Color.Gray
            chart1.BorderSkin.SkinStyle = BorderSkinStyle.Emboss

            chart1.BorderlineColor = System.Drawing.Color.Gray
            'chart1.BorderLineStyle = ChartDashStyle.Solid
            chart1.BorderlineWidth = 4
            chart1.BackGradientStyle = GradientStyle.LeftRight

            ' Set the ChartArea properties
            chartArea1.Name = "Default"
            chartArea1.BackColor = System.Drawing.Color.Gray
            chartArea1.BackGradientStyle = GradientStyle.LeftRight
            chart1.BorderSkin.SkinStyle = BorderSkinStyle.Raised

            chart1.BackColor = Drawing.Color.Navy
            chartArea1.BackColor = Drawing.Color.DarkRed

            ' Add the ChartArea to the Chart

            chartArea1.AxisX.LabelStyle.Enabled = True
            chartArea1.AxisX.IsLabelAutoFit = True
            chartArea1.AxisX.LabelAutoFitStyle = LabelAutoFitStyles.LabelsAngleStep30

            ' Set the Legend properties
            legend1.Name = "Default"
            legend1.Docking = Docking.Bottom
            legend1.LegendStyle = LegendStyle.Row
            legend1.Alignment = System.Drawing.StringAlignment.Center

            legend1.BackColor = System.Drawing.Color.Transparent
            legend1.BorderColor = System.Drawing.Color.Black
            legend1.BorderWidth = 1

            ' Add the Legend to the Chart

            ' Set the Series properties
            'series1.BorderColor = System.Drawing.Color.DarkSlateGray
            series1.Name = "Actual"
            series1.ChartType = SeriesChartType.Line
            series1.BorderColor = Drawing.Color.Black
            series1.BorderWidth = 5
            'following two lines used to change series line colors....
            series1.EmptyPointStyle.Color = Drawing.Color.Transparent
            series1.Color = Drawing.Color.DodgerBlue

            'series2.BorderColor = System.Drawing.Color.DarkSlateGray
            series2.Name = "Budget"
            series2.ChartType = SeriesChartType.Line
            series2.BorderWidth = 5
            'following two lines used to change series line colors....
            series2.EmptyPointStyle.Color = Drawing.Color.Transparent
            series2.Color = Drawing.Color.GreenYellow

            'series3.Name = "Series3"
            'series3.BorderWidth = 3
            'series3.ChartType = SeriesChartType.Line

            ' Add the Series to the Chart
            chartArea1.AxisX.Interval = 1
            chartArea1.AxisX.LabelStyle.ForeColor = Drawing.Color.Black
            chartArea1.AxisY.LabelStyle.ForeColor = Drawing.Color.White
            'chartArea1.AxisX.LabelStyle.IsEndLabelVisible = False

            Dim strDate As String
            Dim y As Decimal
            For i As Integer = 0 To oGridView.Rows.Count - 1
                strDate = CStr(CDate(oGridView.Rows(i).Cells(2).Text))
                y = CDec(oGridView.Rows(i).Cells(3).Text)
                series1.Points.AddXY(strDate, y)

            For i As Integer = 0 To oGridView.Rows.Count - 1
                strDate = CStr(CDate(oGridView.Rows(i).Cells(2).Text))
                y = CDec(oGridView.Rows(i).Cells(4).Text)
                series2.Points.AddXY(strDate, y)
            chartArea1.AxisX.LabelStyle.Angle = -45
            'Preserve the chart's state during callbacks
            'chart1.CallbackStateContent = CallbackStateContent.All
            chart1.Titles.Add(New Title(oTitle, Docking.Top, New Font("Century Gothic", 16, FontStyle.Regular), Drawing.Color.White))

            ' You MUST add the Chart to a form. By default, form1 is created on aspx pages.
        Catch ex As Exception
        End Try

    End Sub
Question by:murbro
    LVL 25

    Accepted Solution

    ..try ..

    Chart1.Attributes("Width") = "100%"

    If that doesn't work, it may be because you have the chart nested inside another control .. for example a Panel, UpdatePanel, or HtmlTableCell..where the width is fixed or set in some way.

    You could also create a CSS style statically on the page, and apply it to the control in your code when adding the chart dynamically.
    ... or try creating the style dynamically like so..

    Chart1.Style.Add("width", "100%")

    Author Closing Comment

    Thanks very much

    Featured Post

    What Should I Do With This Threat Intelligence?

    Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

    Join & Write a Comment

    Calculating holidays and working days is a function that is often needed yet it is not one found within the Framework. This article presents one approach to building a working-day calculator for use in .NET.
    If you need to start windows update installation remotely or as a scheduled task you will find this very helpful.
    Get a first impression of how PRTG looks and learn how it works.   This video is a short introduction to PRTG, as an initial overview or as a quick start for new PRTG users.
    Here's a very brief overview of the methods PRTG Network Monitor ( offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    21 Experts available now in Live!

    Get 1:1 Help Now