jqPlot - wykresy w ASP MVC

Chcąc wyświetlić na naszej stronie wykres wartości, możemy skorzystać z Silverlighta lub javascriptu. Możliwści silvrlighta podczas tworzenia wykresów prezentowałem w jednym z wcześniejszych postów. Teraz pokażę w jaki sposób można za pomocą JSONa i biblioteki jQPlot wyświetlić wykres dla pewnych wartości (np. pobranych z bazy danych).
Ze strony http://www.jqplot.com/ pobieramy bibliotekę jQPlot.
Po pobraniu dodajemy pliki pluginu do naszego projektu:

Następnie dodajemy odnośniki do bibliotek jQuery oraz jQPlot:

Code:

<script src="../../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../../Scripts/jquery.jqplot.min.js" type="text/javascript"></script>
    <link href="../../Scripts/jquery.jqplot.css" rel="stylesheet" type="text/css" />

W naszym widoku umieścimy kod znajdujący się na stronie autora dodatku:

Code:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>
 
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewData["Message"] %></h2>
    <div id="chartdiv" style="height:400px;width:300px; "></div>
    <script type="text/javascript">
        $.jqplot('chartdiv', [[[1, 2], [3, 5.12], [5, 13.1], [7, 33.6], [9, 85.9], [11, 219.9]]]);
    </script>
</asp:Content>

Po uruchomieniu aplikacji otrzymamy następujący widok:

Oczywiście sztywne umieszczenie wartości w kodzie nie przyda się nam zbytnio. Potrzebna jest nam metoda, która pozwoli zwrócić dane do widoku:

Code:

public ActionResult GetChartData()
        {
            JsonResult jsonResult = new JsonResult();
            int[] data = { 1, 5, 6, 8, 3, 4 };
            jsonResult.Data = data;
            jsonResult.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return jsonResult;
        }

W widoku umieszczamy kod jQuery odpowiedzialny za odebranie danych z kontrolera:

Code:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%: ViewData["Message"] %></h2>
    <div id="chartdiv" style="height:400px;width:300px; "></div>
    <script type="text/javascript">
        $(document).ready(function () {
            $.getJSON("/Home/GetChartData", null, function (data) {
                $.jqplot('chartdiv', [data]);
            });
        });
    </script>
</asp:Content>

Po uruchomieniu aplikacji zobaczymy następujący wykres:

Oczywiście jqPlot oferuje dużo więcej możliwości, m.in.:
- różne typy wykresów
- osie z dowolnym formatowaniem
- automatyczne wyliczanie linii trendu
- podświetlanie punktów i wyświetlanie wartości w danym punkcie
- drag and drop punktów
To tylko kilka z wielu możliwości tego komponentu.
Zachęcam do używania i eksperymentowania.