Exploring the ASP.NET 3.5 Chart Controls

Contact

Applications

AJAX, JavaScript and JQuery

MS Chart Controls for .Net3.5 SP1

Exploring the ASP.NET 3.5 Chart Controls

Chart using SQLDataSource with no CodeBehind

Image and Styles

GridView and ListView

Exploring the ASP.NET 3.5 Chart Controls with code snippet

Code Snippets:

'VB .Net code to create an Interactive chart using .Net Chart Control

Dim series As New Series("Monthly Sales")
Dim series1 = New Series("Avarage Sales")
series.ChartType = SeriesChartType.Column
series.BorderWidth = 3
series.ShadowOffset = 2
series1.ChartType = SeriesChartType.Spline
series1.BorderWidth = 3
series1.ShadowOffset = 2

Dim aDate As Date = Date.Now.AddMonths(-12)
Dim rnd As New System.Random
Dim value, minValue, maxValue, Avarage, Total As Integer
Dim i, min_i, max_i As Integer
minValue = 0
min_i = 0
max_i = 0
Total = 0
Avarage = 0
    For i = 0 To 11
       value = rnd.NextDouble * 10000 + rnd.NextDouble * 100 + 999
       Total = Total + value
       Avarage = Total / (i + 1)
       series.Points.AddXY(aDate.AddMonths(i).ToOADate, value)
       series1.Points.AddXY(aDate.AddMonths(i).ToOADate, Avarage)
       If i = 0 Then
            minValue = value
            maxValue = value
       Else
            If value < minValue Then
                minValue = value
                min_i = i
            End If
            If value > maxValue Then
                maxValue = value
                max_i = i
            End If
        End If
    Next

chSales.Series.Add(series)
 chSales.Series.Add(series1)

chSales.Series("Monthly Sales").IsValueShownAsLabel = True
 chSales.Series("Monthly Sales").MarkerStyle = MarkerStyle.Circle
 chSales.Series("Monthly Sales").MarkerSize = 3
 chSales.Series("Monthly Sales").MarkerColor = Color.Magenta
 chSales.Series("Avarage Sales").MarkerStyle = MarkerStyle.Diamond
 chSales.Series("Avarage Sales").MarkerSize = 8
 chSales.Series("Avarage Sales").MarkerBorderWidth = 2
 chSales.Series("Avarage Sales").MarkerBorderColor = Color.DarkGray
 chSales.Series("Avarage Sales").MarkerColor = Color.Red

chSales.Titles.Add("ABC Inc. Last 12 Month Sales Report")
 chSales.Titles(0).Font = New Font("Vardan", 14, FontStyle.Bold)
 chSales.Titles(0).ForeColor = Color.MidnightBlue
 chSales.Titles(0).ShadowOffset = 4
 chSales.Titles(0).ShadowColor = Color.LightGray

Dim annotation As New CalloutAnnotation()
 annotation.CalloutStyle = rnd.Next(1, 7)
 annotation.AnchorDataPoint = chSales.Series(0).Points(min_i)
 annotation.Text = "Min Sales - " + minValue.ToString + "K$"
 annotation.Font = New Drawing.Font("Arial", 10)
 annotation.Height = 8
 annotation.Width = 25
 annotation.LineColor = Drawing.Color.DimGray
 annotation.BackColor = Drawing.Color.FromArgb(100, Drawing.Color.Red)
 chSales.Annotations.Add(annotation)
 annotation = New CalloutAnnotation()
 annotation.CalloutStyle = rnd.Next(1, 7)
 annotation.AnchorDataPoint = chSales.Series(0).Points(max_i)
 annotation.Text = "Max Sales - " + maxValue.ToString + "K$"
 annotation.Font = New Drawing.Font("Arial", 10)
 annotation.Height = 8
 annotation.Width = 25
 annotation.LineColor = Drawing.Color.DimGray
 annotation.BackColor = Drawing.Color.FromArgb(100, Drawing.Color.Green)
 chSales.Annotations.Add(annotation)

chSales.ChartAreas("ChartArea1").AxisY.Title = "Sales in K$"
 chSales.ChartAreas("ChartArea1").AxisX.IsMarginVisible = True

chSales.Legends("Default").LegendStyle = LegendStyle.Table
 chSales.Legends("Default").TableStyle = LegendTableStyle.Auto
 chSales.Legends("Default").Docking = Docking.Top
 chSales.Legends("Default").Alignment = Drawing.StringAlignment.Center

chSales.ChartAreas("ChartArea1").Position.Auto = True
 chSales.ChartAreas("ChartArea1").InnerPlotPosition.Auto = True

chSales.Series("Monthly Sales").Color = Drawing.Color.LightGray
 chSales.Series("Monthly Sales").BackSecondaryColor = Drawing.Color.White
 chSales.Series("Monthly Sales").BackGradientStyle = GradientStyle.VerticalCenter
 chSales.Series("Monthly Sales").BorderColor = Drawing.Color.DimGray
 chSales.Series("Monthly Sales").BorderWidth = 1
 chSales.Series("Monthly Sales").BorderDashStyle = ChartDashStyle.Solid
 chSales.Series("Monthly Sales").ShadowOffset = 2
 chSales.Series("Monthly Sales").XValueType = ChartValueType.DateTime

chSales.ChartAreas("ChartArea1").AxisX.LabelStyle.Format = "MMM yyyy"
 chSales.ChartAreas("ChartArea1").AxisX.MinorGrid.Enabled = True
 chSales.ChartAreas("ChartArea1").AxisX.MinorTickMark.Enabled = False
 chSales.ChartAreas("ChartArea1").AxisX.MinorGrid.Enabled = False
 chSales.ChartAreas("ChartArea1").AxisX.Interval = 31
 chSales.ChartAreas("ChartArea1").AxisY.Interval = 1500
 chSales.ChartAreas("ChartArea1").AxisX.MajorGrid.LineColor = Drawing.Color.LightGray