HowTo: ASP.NET Chart Controls mit ASP.NET MVC nutzen

Microsoft hat heute ein neues kleines ASP.NET Feature veröffentlicht. Die Rede ist von den ASP.NET Chart Controls (welche zum Teil auf den Dundas Charts basieren).
Diese Controls schauen eigentlich ziemlich nett aus:

image

Das beste daran: Es funktioniert mit 2 Tricks auch recht gut mit ASP.NET MVC.

Download Links für die ASP.NET Charts (alles kostenlos) :

Web.Config editieren

Unter "<system.web><pages><controls>" dieses hinzufügen:

<add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>

Und unter den "<httpHandlers>" folgendes:

<add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>

Meine Quelle: Combining ASP.NET MVC and ASP.NET Charting Controls

Chart Control hinzufügen:

Variante A: ASP.NET Control + Code behind

Bei dieser Variante muss man ein paar Zeilen Code in der Code behind hinzufügen, allerdings sollte die gesamten Daten vom Controller kommen, sodass man dies noch als OK ansehen kann.

Ich habe dabei das "GettingStartet" Control aus den Samples genommen.

Index.aspx:

<asp:chart id="Chart1" runat="server" Height="296px" Width="412px" Palette="BrightPastel" imagetype="Png" BorderDashStyle="Solid" BackSecondaryColor="White" BackGradientStyle="TopBottom" BorderWidth="2" backcolor="#D3DFF0" BorderColor="26, 59, 105">
	<Titles>
		<asp:Title Text="With datasource in code behind" />
	</Titles>
	<legends>
		<asp:Legend IsTextAutoFit="False" Name="Default" BackColor="Transparent" Font="Trebuchet MS, 8.25pt, style=Bold"></asp:Legend>
	</legends>
	<borderskin skinstyle="Emboss"></borderskin>
	<series>
		<asp:Series Name="Column" BorderColor="180, 26, 59, 105">
		</asp:Series>
	</series>
	<chartareas>
		<asp:ChartArea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="64, 165, 191, 228" ShadowColor="Transparent" BackGradientStyle="TopBottom">
			<area3dstyle Rotation="10" perspective="10" Inclination="15" IsRightAngleAxes="False" wallwidth="0" IsClustered="False"></area3dstyle>
			<axisy linecolor="64, 64, 64, 64">
				<labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />
				<majorgrid linecolor="64, 64, 64, 64" />
			</axisy>
			<axisx linecolor="64, 64, 64, 64">
				<labelstyle font="Trebuchet MS, 8.25pt, style=Bold" />
				<majorgrid linecolor="64, 64, 64, 64" />
			</axisx>
		</asp:ChartArea>
	</chartareas>
</asp:chart>

Was das genau bedeuted kann in der Doku nachgelesen werden, wichtig ist, dass wir eine "Serie" namens "Column" haben – dies repräsentiert später unseren Balken auf dem Balkendiagram.

Index.aspx.cs:

    public partial class Index : ViewPage
    {
        protected void Page_Load(object sender, System.EventArgs e)
        {
            foreach (int value in (List<int>)this.ViewData["Chart"])
            {
                this.Chart1.Series["Column"].Points.Add(value);
            }
        }
    }

Ergebnis:

image

Variante B: Inline ASP.NET Control

Ohne Codebehind, direkt auf der Seite mit Inline Code:

        <p>
        <%
						System.Web.UI.DataVisualization.Charting.Chart Chart2 = new System.Web.UI.DataVisualization.Charting.Chart();
                        Chart2.Width = 412;
                        Chart2.Height = 296;
                        Chart2.RenderType = RenderType.ImageTag;

                        Chart2.Palette = ChartColorPalette.BrightPastel;
                        Title t = new Title("No Code Behind Page", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
                        Chart2.Titles.Add(t);
                        Chart2.ChartAreas.Add("Series 1");

						// create a couple of series
                        Chart2.Series.Add("Series 1");
                        Chart2.Series.Add("Series 2");

						// add points to series 1
                        foreach (int value in (List<int>)ViewData["Chart"])
                        {
                            Chart2.Series["Series 1"].Points.AddY(value);
                        }

                        // add points to series 2
                        foreach (int value in (List<int>)ViewData["Chart"])
                        {
                            Chart2.Series["Series 2"].Points.AddY(value + 1);
                        }

                        Chart2.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
                        Chart2.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);
                        Chart2.BorderlineDashStyle = ChartDashStyle.Solid;
                        Chart2.BorderWidth = 2;

                        Chart2.Legends.Add("Legend1");

						// Render chart control
                        Chart2.Page = this;
						HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
						Chart2.RenderControl(writer);

                     %>
        </p>

Ergebnis:

image

Beide Controls zusammen:

image

[ Download Source Code ]

Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf dem Laufenden bleiben willst, abonniere unseren RSS Feed oder folge uns auf Twitter.

About the author

Written by Robert Mühsig

Hi, ich bin Robert Mühsig und bin Webentwickler und beschäftige mich mit Web-Frameworks auf dem Microsoft Web Stack und scheue mich auch nicht vor Javascript. Der Blog begann als "Problemsammelstelle und Lösungshilfe" und seitdem schreibe ich hier alles auf. Seit 2008 bin ich Microsoft MVP für ASP.NET. Treffen kann man mich online via Twitter (@robert0muehsig) oder hier.

8 Responses

  1. Handelt es sich hierbei nur um Grafiken die erzeugt werden oder wird eine Technologie wie Flash eingesetzt?
    Wenn man einen interaktiven Chart möchte, dann empfehle ich OpenFlashChart.
    Hierfür gibt es auch eine ASP-Implementierung.

    Ein Artikel darüber wäre für viele sicherlich interessant.

    Reply
  2. Das sind statische Bilder die generiert werden. Es gibt auch im SilverlightToolkit interaktive Grafiken oder halt mit Flash.

    Allerdings kenn ich mich da weniger aus und für Umsonst sind die Grafiken recht schick gemacht :)

    Reply
  3. Für umsonst gibt es Chart-Control? Aber wie passt das, wenn diese auf den Dundas-Charts basieren die wiederum Geld kosten?
    Apropos, hast Du vielleicht auch Tipps für kostenlose Chart-Controls für Windows-Forms-Anwendungen in C# bzw VB.NET?

    Reply
  4. Microsoft hat die Dundas Charts wohl lizensiert. Hier ist eine ganz nette Erklärung.
    Die Charts gibts wohl auch für WinForms – habe ich aber jetzt nicht ausprobiert, sollte aber klappen :)

    Reply
  5. Für eine Windows-Forms Anwendung kann ich den ZedGraph empfehlen.
    http://www.codeproject.com/KB/graphics/zedgraph.aspx

    Wobei der OpenFlashChart wesentlich besser aussieht und auch mehr kann.
    Aber ob man diesen in einer Forms-Anwendung ohne weiteres einbinden kann weiß ich nicht.

    Reply
  6. Vielen Dank für die Infos :-)  Ich werde bei Zeiten mal ein bisschen rumtesten. Zedgraph sieht jedenfalls schonmal ganz vielversprechend aus :-)

    Reply
  7. ich bekomme “‘WebApplication2.Index’ does not contain a definition for ‘ViewData’ and no extension method ‘ViewData’ accepting a first argument of type ‘WebApplication2.Index’ could be found (are you missing a using directive or an assembly reference?)” was sool ich jetzt halt machen?!!!

    Reply

Comment on this post

Letzte Posts

  • image.png
    IIS & Windows Authentication – Troubleshooting mit Negotiate & NTLM

    Windows Authentifizierung ist eine einfache (und naheliegende) Authentifizierungs-Option für “Haus-interne” Webapplikationen. Setup Im IIS selbst kann man die Windows Authentifzierung sehr leicht anschalten: Natürlich kann man dies auch über die web.config steuern: <system.web> ... <authentication mode="Windows"/> ... </system.web> ... Fehlermeldung “HTTP Error 401.2 – Unauthorized”: Dies kann (wie fast immer) viele Gründe haben, z.B. weil ...

  • image.png
    Json-Online-Tools: Viewer & Json2Csharp Generator

    Wo APIs im Spiel sind, ist das JSON Format nicht weit. Da ich immer mal wieder zwei Tools benutze, möchte ich diese hier auch mal kurz würdigen. JSON Viewer Wer nur den JSON-Text vor sich hat sieht meist die Struktur nicht. Über JSON Viewer kann man sich recht einfach einen Überblick verschaffen: [URL] JSON2CSharp Der ...

  • image.png
    Tools & Vorgehen für Entwicklung rund um OpenXml oder wie erstelle ich Office Dokumente mit .NET?

    Durch meine Tätigkeit bei der  OneOffixx AG habe ich recht tiefe Einblicke in die Erstellung von Microsoft Office Dokumente mit .NET bekommen. Da das Problem “Office Dokumente per Code” zu erstellen recht verbreitet ist, schreib ich mal Empfehlungen für die ersten Schritte. Must Have Tools Ganz klar sollte man das Office in der jeweiligen Version ...

  • image.png
    Windows Phone SDK- & “System”-Icons

    Zwar legt das Metro Design viel Wert auf Typografie – jedoch sind auch Icons sehr wichtig. Wer das Windows Phone SDK installiert hat, bekommt 36 Icons mitgeliefert. Diese sind unter diesem Pfad zu finden: C:\Program Files (x86)\Microsoft SDKs\Windows Phone\v8.0\Icons Viele Icons, welche man von den eingebauten Anwendungen kennt, sind allerdings nicht enthalten. Pedro Lamas hat ...

  • image.png
    Wie finde ich heraus ob mein ADFS 2.0 funktioniert?

    Ich hatte mich recht lange mti dem Thema ADFS 2.0 (“Active Directory Federation Services”) beschäftigt und da kam die recht einfache Frage auf: Wie stelle ich fest ob die Verbindung zwischen ADFS und AD “funktioniert”? Hier eine simple Variante es zu testen… Was ist ein ADFS überhaupt? Wenn man über AD-Grenzen hinweg “Vertrauensstellungen” braucht, dann ...

Unterstützt von…

Facebook