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 ]


Kick It auf dotnet-kicks.de
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

Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.

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

  • Carriage Return / Neue Zeile in Textareas

    Eine kleine Aufgabe: Jede neue Textzeile (Carriage Return/Wenn man Enter drückt ) in einer Textarea soll ein Element in einer Auflistung sein – wie mach ich das jetzt am einfachsten? Eigentlich ein grundlegendes Element im Web und der Nutzer macht bewusst Absätze – daher wäre es nur gerecht, wenn man das auch entsprechend würdigt. Kleine ...

  • image.png
    Doom, Quake, Wolfenstein & co. Source Code auf GitHub

    id Software, die Macher von Doom, Quake, Wolfenstein & co., stellen regelmäßig ihre älteren Spieltitle als Open Source zur Verfügung. Das Ganze runterzuladen fand ich bisher immer recht mühselig, allerdings gibt es seit kurzer Zeit die Sourcen auch auf GitHub. Darunter Spiele wie Doom 3, Quake 3, Wolfenstein für iOS. Wer also schon immer mal ...

  • image.png
    Twitter Bootstrap 2.0 released & “Release Präsentation”

    Wie bereits vom Twitter Bootstrap Team angekündigt wurde offiziel die Version 2.0 des UI Toolskits “Twitter Bootstrap” veröffentlich. Zudem wurden die Slides, welche bei der Release Party gezeigt wurden auch veröffentlicht: Downloads finden sich auf der Twitter Bootstrap Seite auf GitHub. Wenn dir der Blogpost gefallen hat, dann hinterlasse doch einen Kommentar. Wenn du auf ...

  • image.png
    Javascript zu Dart Translator

    Dart, Google Javascript Alternative, wurde vor ein paar Monaten vorgestellt und die Webentwickler Szene ist noch etwas gespalten, ob Dart nun überflüssig ist oder einfach nur cool und längst überfällig ist. Um die Sprache näher zu erläutern hat Google die grundlegenden Javascript Basics nach Dart übersetzt. Das Ergebnis ist der “Translator”. Der Name mag momentan ...

  • Twitter Bootstrap 2.0–“Beta”

    Twitter Bootstrap, ein UI-Toolkit für Web-Applikationen von Twitter, erscheint (wie bereits berichtet) demnächst in der Version 2.0. Der offizielle Release ist am 31. Januar, allerdings beginnt jetzt laut Mark Otto (einer der Hauptentwickler von Twitter Bootstrap) die intensive Test-Phase. Das heisst, das es nun offiziel auch die 2.0 Dokumentation online gibt. Im Vergleich zur aktuellen ...

Support us!

Facebook