czwartek, 18 września 2014

Google Charts w ASP.MVC (Razor)

Do rysowania wykresów za pośrednictwem ASP.MVC postanowiłem użyć darmowej biblioteki dostarczonej przez google, czyli chart. Wykresy rysuje się w tym w sposób bardzo prosty i przyjemny, tj. za pomocą javascriptu. Przykłady są dobrze opisane, oraz zawierają odnośnik do jsfiddle.
Całość sprowadza się, do odniesienia się do wgrania zew. biblioteki rys.
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
wybrania miejsca, w którym ma się ten wykres narysować:
     <div id="piechart" style="width: 900px; height: 500px;"></div>
stworzenia metody rysującej oraz "podpięcie" jej pod delegata:
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);
        var options = {
          title: 'My Daily Activities'
        };
        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }

Ok.Mamy javascript, mamy jsfiddle, na którym możemy przetestować nasz odpowiednik wykresu, a nawet kilka wykresów pod sobą. A co jeżeli jako źródło danych, chcieli byśmy wykorzystać model z naszego ASP.MVC ??

Na szczęście istnieje znacznik (tag) <text>  </text> który możemy wykorzystać.
Poniżej przykład takiej metody:

        function drawCurrency() {
            @if (Model.Tasks != null && Model.Tasks.Count > 0)
            {
                <text>
                var data = google.visualization.arrayToDataTable([
                ['Task', 'Hours per Day'],
                @foreach (var task in @Model.Tasks)
                {
                    <text>
                    ['@task.name', parseFloat('@task.hour')],
                    </text>
                }
                ]);
                var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                chart.draw(data, options);
                </text>
            }
        }

1 komentarz:

  1. Uwaga. Jak donosi ekipa bookrage "kod wysyła śledzące ciasteczka od Google... (Google Charts API),".

    Reasumując - nie używać biblioteki Google Charts.

    OdpowiedzUsuń