Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 640
  • Last Modified:

ASP.net 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)

        Try
            'First build GridView 
            Dim oGridView As New GridView
            Dim dt As DataTable = SQL_Data_Table.GetSQLDataTable(oConnectionString, oSQL)
            oGridView.DataSource = dt
            oGridView.DataBind()
            'up.ContentTemplateContainer.Controls.Add(oGridView)
            'up.ContentTemplateContainer.Controls.Add(oTimer)
            'T.Rows(0).Cells(oColumn).Controls.Add(up)
            Table1.Rows(0).Cells(0).Controls.Add(oGridView)

            ' 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
                chart1.ChartAreas.Add(chartArea1)

                ' 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
                chart1.Legends.Add(legend1)

                ' 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
                chart1.Series.Add(series1)
                chart1.Series.Add(series2)
                chart1.Series.Add(series3)


                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)
                    series2.Points.AddY(y)

                Next

                '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.
            Table1.Rows(0).Cells(0).Controls.Add(chart1)
        Catch ex As Exception
            MsgBox(ex.Message)
        End Try

    End Sub

Open in new window


1
2Image2.jpg
0
Murray Brown
Asked:
Murray Brown
  • 2
3 Solutions
 
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
                chart1.Series.Add(series1)
                chart1.Series.Add(series2)

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

                chart1.DataSource = dt
                chart1.DataBind()

Open in new window

0
 
Jitendra PatilSr.Software EngineerCommented:
hi

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
	     Chart1.Series.Clear()
	     Chart1.Titles.Add("Demo")
	     '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.
	     Chart1.Series.Add(s)
	 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.
0
 
Robert SchuttSoftware EngineerCommented:
@Jitendra Patil: that code is winforms instead of asp.net, 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

chart
0
 
Murray BrownMicrosoft Cloud Azure/Excel Solution DeveloperAuthor Commented:
Thanks very much for the help
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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