Chciałem stworzyć wykres, który przedstawia jak dobrze gracz sobie dobrze radzi podczas sezonu. Słyszałem o takich kontrolkach jak wijmo, które umożliwiają tworzenie grafów. Można je używać podobno za darmo, ale trzeba się zarejestrować. Dodatkowo wyświetlane są informacje, że wykres został stworzony dzięki wijmo.
Jednak ja poszukałem innej opcji o której też już kiedyś słyszałem: Google Charts. Bezpłatne, bez żadnych znaków wodnych, dobra dokumentacja – nic tylko używać.
Wszystko działa po stronie klienta. Na początku muszę poinformować przeglądarkę z czego będę korzystać:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
Następnie kawałek kodu w którym to będę wyświetlać mój graf:
<body>
<form id="form">
<div id="chart" style="width: 600px; height: 350px;">
</div>
</form>
</body>
Od razu po załadowaniu strony chcę wyświetlić graf:
$(document).ready(function () {
drawChart();
});
A jak samo tworzenie grafu wygląda? Na początku tworzę tabelę w której będę przechowywać informacje na podstawie których wyświetlony będzie graf.
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('data', 'Data gry');
data.addColumn('number', 'Zdobyte punkty');
...
}
Pierwszy kolumna przyjmuje dane na oś X. AddColumn jako pierwszy argument przyjmuje jedną z kilku opcji: string, number, date, datetime, timeofday (więcej tutaj). Jako drugi argument przyjmuje nazwę tej osi. Druga kolumna to już dane które będę wyświetlane na osi Y. W moim przypadku będzie wartość numeryczna opisana nazwą ‚Zdobyte punkty’.
Mam stworzoną tablicę, teraz trzeba dodać do nich wiersze:
var model = @Html.Raw(@Json.Serialize(Model));
for (var i = 0; i < model.length; i++) {
var date = new Date(model[i].Tournament.Date);
data.addRow([date, model[i].Points]);
}
Model konwertuje na obiekt JSowy. Następnie dodaje wiesz przy pomocy metody addRow. Do pierwszej kolumny przypisuję date, a do drugiej ilość punktów zdobytych przez gracza.
Następnie definiuję opcje grafu:
var options = {
title: 'Forma zawodnika',
curveType: 'function',
legend: { position: 'bottom' }
};
Zdefiniowałem jak się ma nazywać graf, jakiego typu ma być kreska na wykresie, gdzie ma byś wyświetlona legenda dla grafu. Jest do dyspozycji wiele opcje, które pozwalają customizować graf.
I dopiero pod sam koniec składam to wszystkie informacje i wyświetlany jest ładny graf:
new google.visualization.LineChart(document.getElementById('chart')).draw(data, options);
Całość prezentuje się tak:
@model List<PokerWebsite.Core.Domain.Result>
@inject IJsonHelper Json;
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
$(document).ready(function () {
drawChart();
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Data gry');
data.addColumn('number', 'Zdobyte punkty');
var model = @Html.Raw(@Json.Serialize(Model));
for (var i = 0; i < model.length; i++) {
var date = new Date(model[i].Tournament.Date);
data.addRow([date, model[i].Points]);
}
var options = {
title: 'Forma zawodnika',
curveType: 'function',
legend: { position: 'bottom' }
};
new google.visualization.LineChart(document.getElementById('chart')).draw(data, options);
}
</script>
</head>
<body>
<form id="form">
<div id="chart" style="width: 600px; height: 350px;">
</div>
</form>
</body>
</html>