Integracja aplikacji z Google Charts

Google Charts to świetne rozwiązanie, jeżeli potrzebujecie wykresów w swojej aplikacji. Właściwie spodobało mi się od razu po pierwszym użyciu i póki co nie szukam alternatywy (chociaż jeżeli korzystacie z jakiś przyjemnych bibliotek to chętnie poznam :-)).

Integracja we własnym systemie jest w sumie prosta, chociaż trochę się nagimnastykowaliśmy, żeby odpowiednio do naszych potrzeb skonfigurować bardziej rozbudowane wykresy. Po przez bardziej rozbudowane mam na myśli np.. liniowy i kolumnowy na jednym „arkuszu”. Po przez nagimnastykowaliśmy mam na myśli np. to, że wykres w legendach dublował wartości, albo wysokość słupka nie była adekwatna do prawdziwej wartości. Mimo wszystko w większości metodą prób i błędów doszliśmy w końcu do postaci jakiej oczekiwaliśmy. Rezultat zobaczycie na końcu postu.

Właściwie od czego należy zacząć? No jaha, od przygotowania danych. Dobry wykres bez odpowiednio przygotowanych danych nie może się obejść. Najlepszym rozwiązaniem będzie przygotowanie JSONa z tym czego potrzebujemy. JSON z naszymi danymi może wyglądać np.. tak:

	

    public JsonResult GetOrdersInYearByMonth()
    {
        int year = DateTime.Today.Year;
     
        var orders = GetOrdersByMonth(year)
     
        var ordersInYear = from o in orders
                            select new
                            {
                                month = o.Month, //miesiące w roku od 1 do 12
                                ordersQuantity = o.OrdersQuantity, //ilość zamówień w każdym miesiącu - wykres słupkowy
                                ordersValue = o.OrdersValue //wartość zamówień w każdym miesiącu - wykres liniowy
                            };
     
         var rows = ordersInYear.ToArray();
     
         return Json(rows, JsonRequestBehavior.AllowGet);
    }

Właściwie jest proste. Bierzemy listę miesięcy z wartością i ilością zamówień dla każdego z nich, a później przypisujemy je do tablicy i zwracamy jako JSON.

Dalej pozostało nam już tylko wykorzystać API Google Charts i wypluć wykres na widok.

	

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", { packages: ["corechart"] });
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            $.get('/Report/GetOrdersInYearByMonth', {},
                function (data) {
                    var tdata = new google.visualization.DataTable();
     
                    tdata.addColumn('string', 'Miesiąc');
                    tdata.addColumn('number', 'Wartość zamówień');
                    tdata.addColumn('number', 'Ilość zamówień')
     
                    for (var i = 0; i < data.length; i++) {
                        tdata.addRow([data[i].month, { v: data[i].ordersValue, f: data[i].ordersValue + ' PLN' }, data[i].ordersQuantity]);
                    }
     
                    var options = {
                        title: 'Raport sprzedaży w roku @Model.GivenYear.ToString()',
                        'titleTextStyle': { fontSize: 18 },
                        'backgroundColor': '#ffffff',
                        'chartArea': { width: '80%' },
                        'fontName': 'PT Sans',
                        'colors': ['#004489', '#74C2E1'],
                        'pointSize': 8,
                        formatter: function () {
                            return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 2);
                        },
                        vAxis: { gridlines: { count: 6 } },
                        vAxes: {
                            0: { logScale: false, format: '# PLN' },
                            1: { logScale: false, format: '# zam' }
                        },
                        series: {
                            0: { targetAxisIndex: 0, type: 'line' },
                            1: { targetAxisIndex: 1, type: 'bars' },
                            2: { targetAxisIndex: 2 }
                        }
                    }
     
                    var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
                    chart.draw(tdata, options);
                });
            }
    </script>

Pierwszą rzeczą jest zaimportowanie api. Bez tego się nie obejdzie 😉

Dalej musimy oczywiście pobrać naszego JSONa z danymi i dodać kolumny w tabeli z danymi. Będziemy potrzebować dokładnie trzech – miesięcy, wartości zamówień i ilości zamówień. Następnie w pętli for do naszej tabeli z danymi będziemy przypisywać odpowiednie wartości dla konkretnych miesięcy. Pętla będzie się wykonywać tak długo dopóki iterator jest mniejszy niż długość naszej tablicy, którą przekazaliśmy w JSONie. Czyli wykona się 12 razy, bo mamy 12 miesięcy.

Teraz zostało już tylko przekuć nasze dane na poprawny wygląd wykresu i właśnie tutaj jest najwięcej zabawy. Sekcji options nie będę opisywał bo tam jest zabawa z kolorkami, fontami itd. Ale dalej już trzeba kilka rzeczy opowiedzieć.

W vAxes ustalamy cechy legendy pionowej. Ze skali logarytmicznej nie chcemy korzystać, więc ustawiamy na false. Tutaj możemy również sformatować legendę. Po lewej stronie nie będą pojawiały się suche liczby dotyczące wartości zamówień, a ładnie przygotowane podające również walutę i ilość zamówień.

Na koniec zaś definiujemy jakie typy przyjmą odpowiednie serie. U nas wiadomo, że będą to słupki i linie. Później już tylko musimy kazać narysować wykres. I to już prawie jest koniec. W kodzie HTML musimy tylko zdefiniować DIV o odpowiedniej klasie:

<div id="chart_div"></div>

I to właśnie w tamtym miejscu będzie wyświetlany wykres.

Efekt wszystkich zabiegów wygląda tak:

2014-08-24_1521

A Wy jakie macie doświadczenia z Google Charts? Korzystaliście? Może takie rozwiązanie Wam się nie podoba i używacie czegoś innego?

Czekam na komentarze i do zobaczenia!

Reklamy

One comment

  1. Pingback: dotnetomaniak.pl

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s