Chart Control in VS 2008 and VS 2010

Wer kennt nicht die tägliche Pein mit dem Umgang von vernünftigen Charts in Webseiten - wir plagen uns dann oft mit behelfsmäßigen Konstrukten, wie Integration von Reports mit Microsoft Reporting Services oder kaufen zusätzliche Komponenten, wie z.B. die wirklichen guten Komponenten von DevExpress. Doch jetzt hat Microsoft hier eine Lösung die in .NET 4 integriert ist und man auch für .NET 3.5 mit VS 2008 separat installieren kann.

Review:
Das Microsoft Chart Control ist wirklich eine sehr gelungen Sache. Auf den ersten Blick vermisst man nichts was das Entwicklerherz begehrt. Man kann das Control sowohl statisch als auch dynamisch mit Daten von unterschiedlichen Quellen (DB, Excel, CSV-Datei, usw.) versorgen. Das Control unterstützt AJAX, so das man in Zusammenhang mit dem Click-Event des Controls schöne Master-Detail-Lösungen bauen oder Realtime-Charts implementieren kann. Das Erscheinungsbild des Controls ist in jeder Hinsicht über Attribute oder Code-Behind änderbar, was z.B. eine Schwäche der Charts bei den Reporting Services ist.

Näheres kann man hier finden: Built-in Charting Controls (VS 2010 and .NET 4 Series) - ScottGu's Blog

Direkter Download des Controls für VS 2008 und .NET 3.5: Microsoft Chart Control for .NET Framework

Beispielhafte Definition des Controls:

<asp:Chart ID="Chart1" runat="server" BackColor="#D3DFF0" Palette="BrightPastel"

     ImageType="Png" ImageUrl="~/TempImages/ChartPic_#SEQ(300,3)" Width="412px" Height="296px"

     borderlinestyle="Solid" backgradientendcolor="White" backgradienttype="TopBottom"

     BorderlineWidth="2" BorderlineColor="26, 59, 105" DataSourceID="MasterSource"

     OnClick="Chart1_Click">

     <Titles>

         <asp:Title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 14.25pt, style=Bold" ShadowOffset="3"

             Text="Regional Sales" Alignment="TopLeft" ForeColor="26, 59, 105">

         </asp:Title>

     </Titles>

     <Legends>

         <asp:Legend Enabled="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold">

             <Position Y="21" Height="22" Width="18" X="73"></Position>

         </asp:Legend>

     </Legends>

     <BorderSkin SkinStyle="Emboss"></BorderSkin>

     <Series>

         <asp:Series Name="Sales" BorderColor="180, 26, 59, 105" XValueMember="RegionName"

             YValueMembers="SumOfSales">

         </asp:Series>

     </Series>

     <ChartAreas>

         <asp:ChartArea Name="Default" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid"

             BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent"

             BackGradientStyle="TopBottom">

             <AxisY LineColor="64, 64, 64, 64" IsLabelAutoFit="False">

                 <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"></LabelStyle>

                 <MajorGrid LineColor="64, 64, 64, 64"></MajorGrid>

             </AxisY>

             <AxisX LineColor="64, 64, 64, 64" IsLabelAutoFit="False">

                 <LabelStyle Font="Trebuchet MS, 8.25pt, style=Bold"></LabelStyle>

                 <MajorGrid LineColor="64, 64, 64, 64"></MajorGrid>

             </AxisX>

         </asp:ChartArea>

     </ChartAreas>

 </asp:Chart>

Einfaches DataBinding:

   1: // Initializes a new instance of the DataView class

   2: DataView firstView = new DataView(custDS.Tables[0]);

   3:  

   4: // since the DataView implements and IEnumerable, pass the reader directly into

   5: // the DataBind method with the name of the Columns selected in the query    

   6: Chart1.Series["Default"].Points.DataBindXY(firstView, "Name",firstView, "Sales");

Beispiele: