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.

wybrania miejsca, w którym ma się ten wykres narysować:

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)    który możemy wykorzystać.

Poniżej przykład takiej metody:

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