ASP.NET 4.0: Diagrams

To get your hands on this new and cool feature, create an ASP.NET 4.0 application or web site from within Visual Studio 2010. Check the Data section of the Toolbox window for a new control called Chart. Dragging out a Chart onto a web page creates the following code:

<asp:Chart ID="Chart1" runat="server">
  <Series>
    <asp:Series Name="Series1">
  </asp:Series>
  </Series>
    <ChartAreas>
      <asp:ChartArea Name="ChartArea1">
    </asp:ChartArea>
  </ChartAreas>
</asp:Chart>

There is a huge amount of properties available for the chart. They control the look of the chart, the chart type among other things. I don’t have any databases installed on this computer, so to get some data to do a chart from; I connect the control to a data source that represents the system database master. I use the following query to get a bunch of large numbers:

SELECT [name],[number] FROM dbo.spt_values WHERE [number]>17000

I use number as Y value member.

This is what I have to do to get the fully functional chart! Fooling around with chart types and visual properties is dangerously amusing.

If you haven’t got a database server at all, you can quickly create an object data source in Visual Basic, and assign that to your chart. Connection this code…

Public Class MyChartData

    Private mValue As Integer

    Public Sub New(ByVal Value As Integer)
        Me.mValue = Value
    End Sub

    Public ReadOnly Property Value() As Integer
        Get
            Return Me.mValue
        End Get
    End Property

    Public Shared Function GetItems() As MyChartData()
        Dim Ret As New List(Of MyChartData)()
        Ret.Add(New MyChartData(10))
        Ret.Add(New MyChartData(20))
        Ret.Add(New MyChartData(15))
        Ret.Add(New MyChartData(25))
        Return Ret.ToArray()
    End Function

End Class

…gives you this beautiful result:

Ah, the simplicity! Aaaaah, the power!