Solved Plotting chart from a GridView

Posted on 2014-08-07
Last Modified: 2014-08-07
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

Question by:murbro
    LVL 35

    Accepted Solution

    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

    LVL 12

    Assisted Solution

    by:Jitendra Patil

    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.
    LVL 35

    Assisted Solution

    by:Robert Schutt
    @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


    Author Closing Comment

    Thanks very much for the help

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    I recently went through the process of creating a Calendar Control of events with the basis of using a database to keep track of the dates that are selectable, one requirement was to have the selected date pop-up in a simple lightbox.  At first this…
    Parsing a CSV file is a task that we are confronted with regularly, and although there are a vast number of means to do this, as a newbie, the field can be confusing and the tools can seem complex. A simple solution to parsing a customized CSV fi…
    Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
    In this tutorial you'll learn about bandwidth monitoring with flows and packet sniffing with our network monitoring solution PRTG Network Monitor ( If you're interested in additional methods for monitoring bandwidt…

    737 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

    22 Experts available now in Live!

    Get 1:1 Help Now