Plotting chart from a GridView

Hi. I am using the following code to plot a chart from values in a GridView. My aim is to have two
line chart series in the same chart area. One for budget and the other for actual. Then on
the bottom or x axis I want to show the corresponding date. How do I change my code to do this?

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

            'First build GridView 
            Dim oGridView As New GridView
            Dim dt As DataTable = SQL_Data_Table.GetSQLDataTable(oConnectionString, oSQL)
            oGridView.DataSource = dt

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

            'Add to do code here
            If Not IsPostBack Then
                ' 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 = 340
                '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

                ' Set the ChartArea properties
                chartArea1.Name = "Default"
                chartArea1.BackColor = System.Drawing.Color.Gray

                ' Add the ChartArea to the Chart

                ' 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 = "Series1"
                series1.ChartType = SeriesChartType.SplineArea

                series2.BorderColor = System.Drawing.Color.DarkSlateGray
                series2.Name = "Series2"
                series2.ChartType = SeriesChartType.Column

                series3.Name = "Series3"
                series3.BorderWidth = 3
                series3.ChartType = SeriesChartType.Spline

                ' Add the Series to the Chart

                Dim x As Decimal
                Dim y As Decimal
                For i As Integer = 0 To oGridView.Rows.Count - 1
                    y = CDec(oGridView.Rows(i).Cells(4).Text)


                'Preserve the chart's state during callbacks
                'chart1.CallbackStateContent = CallbackStateContent.All
            End If

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

    End Sub

Open in new window

Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAsked:
Who is Participating?
Robert SchuttSoftware EngineerCommented:
You can use the same datasource for the chart. Instead of lines 61-86 above try this:
                ' Set the Series properties
                series1.BorderColor = System.Drawing.Color.DarkSlateGray
                series1.Name = "Series1"
                series1.ChartType = SeriesChartType.Line ' SplineArea

                series2.BorderColor = System.Drawing.Color.DarkSlateGray
                series2.Name = "Series2"
                series2.ChartType = SeriesChartType.Line ' Column

                ' Add the Series to the Chart

                series1.XValueMember = "BudDate"
                series1.YValueMembers = "AccActual"
                series2.XValueMember = "BudDate"
                series2.YValueMembers = "AccBudget"

                chart1.DataSource = dt

Open in new window

Jitendra PatilSr.Software EngineerCommented:

There is a chart tool where you can add your values and plot in various styles

Drag a chart to your form and add this code

Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
	     'Create a new series and add data points to it.
	     Dim s As New Series
	     s.Name = "aline"
     'Change to a line graph.
	     s.ChartType = SeriesChartType.Line
	     s.Points.AddXY("1990", 27)
	     s.Points.AddXY("1991", 15)
	     s.Points.AddXY("1992", 17)
	     'Add the series to the Chart1 control.
	 End Sub

Open in new window

You will need to add Imports System.Windows.Forms.Data Visualization.Charting

Of course you would have to iterate through your data and add points based on your information.

may be the below links could help you more

Using Microsoft's Chart Controls In An ASP.NET Application: Getting Started

the above link contains code samples in both the languages.

hope this helps.
Robert SchuttSoftware EngineerCommented:
@Jitendra Patil: that code is winforms instead of, the link looks really useful though.

By the way, regarding my code, a few adjustments for better visibility:
                series1.Color = System.Drawing.Color.White
                series1.BorderWidth = 3
                series1.Name = "Actual"
                series1.ChartType = SeriesChartType.Line

                series2.Color = System.Drawing.Color.DarkSlateGray
                series2.BorderWidth = 3
                series2.Name = "Budget"
                series2.ChartType = SeriesChartType.Line

                chartArea1.AxisX.Interval = 1
                chartArea1.AxisX.LabelStyle.IsEndLabelVisible = False

Open in new window

Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks very much for the help
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.