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:
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) :
- Download the free Microsoft Chart Controls
- Download the VS 2008 Tool Support for the Chart Controls
- Download the Microsoft Chart Controls Samples
- Download the Microsoft Chart Controls Documentation
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:
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:
Beide Controls zusammen:




Mike Jones
28. November 2008
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.
Robert Mühsig
28. November 2008
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
Der Softwareentwickler Blog
1. December 2008
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?
Robert Mühsig
1. December 2008
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
Mike Jones
2. December 2008
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.
Der Softwareentwickler Blog
2. December 2008
Vielen Dank für die Infos
 Ich werde bei Zeiten mal ein bisschen rumtesten. Zedgraph sieht jedenfalls schonmal ganz vielversprechend aus
Ahmed
14. September 2010
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?!!!