• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 5238
  • Last Modified:

ASP.net Get dynamically added chart to fit size of the screen

I am using the following code to dynamically add a chart to my ASP.net 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
Murray Brown
Murray Brown
1 Solution
Ron MalmsteadInformation Services ManagerCommented:
..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%")
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks very much

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now