Vor einer Weile habe ich ein kleines Tutorial geschrieben wie ihr das kostenlose MSChart Control benutzen könnt um euch hübsche Grafen zeichnen zu lassen.

ASP.NET MVC 3 bietet euch einen Helper der eine sehr ähnliche Funktionalität bietet und sehr einfach in eure MVC Anwendung zu integrieren ist.

Das Schöne ist, dass wenn ihr das aktuelle Visual Studio Tools update installiert habt, ihr diesen Helper bereits out of the box nutzen. Falls nicht könnt ihr es über das NuGet Paket bequem nachinstallieren.

Hier ein kleines Beispiel wie eine Action aussehen kann, die ein Chart erzeugen soll:

Beispiel 1

    public ActionResult CreateChart()
    {
        Chart bytes = new Chart(width: 400, height: 200)
            .AddSeries(
                chartType: "column",
                xValue: new[] { "Wert1", "Wert2", "Wert3", "Wert4" },
                yValues: new[] { "12", "3", "23", "11" })
            .AddSeries(
                chartType: "column",
                xValue: new[] { "Wert1", "Wert2", "Wert3", "Wert4" },
                yValues: new[] { "13", "32", "23", "5" });

            return File(bytes.GetBytes("png"), "image/png");
    }



Wie man sieht wird hier nachdem das Chart erstellt wurde eine Grafik daraus gemacht und diese dann an die View zur Anzeige gesendet. Der Aufruf in der View ist dementsprechend simpel:
<img src="@Url.Action("CreateChart")" alt="Beschreibung" />



Was vielleicht nicht auf den ersten Blick ersichtlich ist, ist wie man eine legende zu dem Chart anzeigen lassen kann. Dazu muss jede „Serie“ einen namen erhalten und zum Schluss kann man dann die „AddLegend()“ Methode ohne Parameter aufrufen:

Beispiel 2

    public ActionResult CreateChart()
    {
        Chart chart = new Chart(width: 400, height: 200)
            .AddSeries(
                chartType: "column",
                xValue: new[] { "Wert1", "Wert2", "Wert3", "Wert4" },
                name: "Serie 1",
                yValues: new[] { "12", "3", "23", "11" })
            .AddSeries(
                chartType: "column",
                xValue: new[] { "Wert1", "Wert2", "Wert3", "Wert4" },
                name: "Serie 2",
                yValues: new[] { "13", "32", "23", "5" });

        chart.AddLegend();

        return File(chart.GetBytes("png"), "image/png");
    }



Noch etwas umständlicher wird es, wenn man nun die legende an eine andere Stelle setzen will, denn hier muss ein eigenes Theme her. Dieses sollte dann auch nur die Felder enthalten die man ändern will. Wenn man z.B. die legende unten angezeigt haben möchte kann man so vorgehen:

Beispiel 3

        public ActionResult CreateChart()
        {
            string theme = @"<Chart BackColor=""WhiteSmoke"" >
                                    <ChartAreas>
                                        <ChartArea Name=""Default"" BackColor=""White"">
                                    </ChartAreas>
                                    <Legends>
                                        <Legend _Template_=""All"" BackColor=""Transparent"" Font=""Trebuchet MS, 9pt"" IsTextAutoFit=""False"" Docking=""Bottom"" /> 
                                    </Legends>
                                </Chart>";

            Chart chart = new Chart(width: 400, height: 200, theme: theme)
                .AddSeries(
                    chartType: "column",
                    xValue: new[] { "Wert1", "Wert2", "Wert3", "Wert4" },
                    name: "Serie 1",
                    yValues: new[] { "12", "3", "23", "11" })
                .AddSeries(
                    chartType: "column",
                    xValue: new[] { "Wert1", "Wert2", "Wert3", "Wert4" },
                    name: "Serie 2",
                    yValues: new[] { "13", "32", "23", "5" });

            chart.AddLegend();

            return File(chart.GetBytes("png"), "image/png");
        }



Man beachte hier dass dem Chart-Konstruktor ein weiterer Parameter „theme“ übergeben wird.
Im Grunde wars das auch schon. An der Handhabung ändert sich nicht viel. Falls ihr euch irgendwo vertippt wird übrigens einfach kein Bild erzeugt, also vorsicht beim Tippen 😉