Charts (Schaubilder und Diagramme) in ASP.NET MVC generieren

Bild: Microsoft
Vor einigen Tagen suchte ich für mein aktuelles Projekt eine Möglichkeit Charts dynamisch zu generieren und in meine ASP-Anwendung zu integrieren. Zum glück stellt Microsoft hierfür eine kostenlose Bibliothek zur Verfügung. Den Download gibt es hier. Super praktisch ist, dass es sogar Beispiele für ASP.Net gibt. Um das ganze nun auch in einer MVC-Anwendung zu benutzten muss nicht einmal viel gemacht werden.

Nachdem der Download installiert wurde, muss die entsprechende Referenz in dem Projekt hinzugefügt werden. Der Name ist "System.Web.DataVirtualization". Wie hier beschrieben gibt es erst einmal zwei Möglichkeiten den gewünschten Chart auf der Webseite anzuzeigen. Viel praktischer finde ich jedoch eine dritte Lösung. Diese nutzt ausschließlich einen Controller um den Chart zu generieren und gibt diesen dann direkt als Datei an den Browser des Benutzers zurück.
In diesem Beispielscode habe ich einen neuen Controller namens Chartcontroller erstellt. Dieser soll für die Generierung der Schaubilder verantwortlich sein. In meinem Beispiel ist es eine MVC 3. Alle anderen Versionen funktionieren auf die gleiche Art.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.UI.DataVisualization.Charting;
using System.IO;
using System.Drawing;

namespace Chartdemo.Controllers
{
    public class ChartController : Controller
    {
        //
        // GET: /Chart/<

        public FileResult GetChart()
        {
            Chart chart = new Chart();
            // Größe festlegen
            chart.Width = 320;
            chart.Height = 200;

            // Titel festlegen
            chart.Titles.Add(new Title("Mein Schaubild"));

            // Daten für Schaubild erzeugen
            chart.Series.Add("Daten1");
            chart.Series["Daten1"].Points.AddY(3);
            chart.Series["Daten1"].Points.AddY(9);
            chart.Series["Daten1"].Points.AddY(5);
            chart.Series["Daten1"].Points.AddY(7);

            // Typ festlegen
            chart.Series["Daten1"].ChartType = SeriesChartType.Spline;

            // Zeichenbereich anlegen
            chart.ChartAreas.Add(new ChartArea());

            // Datenstrom erzeugen und Bild in Datenstrom laden
            MemoryStream ms = new MemoryStream();
            chart.SaveImage(ms);
            // Datenstrom als Bild zurückgeben
            return File(ms.GetBuffer(), @"image/png");
        }
    }
}
Das hier ist das absolute Minimalbeispiel. Um das ganze schöner zu gestallten sollte man sich zunächst einmal durch die Doku blättern. Leider gibt es nur sehr wenig nützliche Beispiele im Netz, die hübsche Diagramme für diese Bibliothek demonstrieren. Das Diagramm kann anschließend wie ein normaler Controller über dessen URL geladen werden.
<img src="@Url.Action("GetChart", "Chart")" alt="" /> 
Das war es auch schon wieder.


Bookmark and Share

0 Kommentare:

Kommentar veröffentlichen