Programowalna sieć: Rysujemy wykresy za pomocą Google Chart API

W tym artykule opiszę jak można wykorzystać darmowe Google Chart API do umieszczanie wykresów na własnej stronie.
Jako dane do naszego przykładu użyję pobranego z BDL GUS średniego zużycia energii elektrycznej w 2010 roku w przeliczeniu na jednego mieszkańca.

Przygotowanie strony

Aby można było skorzystać z API musimy na naszej stronie w sekcji <head> dołożyć następującą deklarację:

<script src='https://www.google.com/jsapi' type='text/javascript'>
</script>

Przygotowanie danych

Komunikacja z Google Chart API odbywa się poprzez JavaScript.
W pierwszym kroku załadujemy bibliotekę bibliotekę

google.load('visualization', '1.0', {'packages':['corechart']});
google.load('visualization', '1', {packages: ['table']});
google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawCharts);

W ostatniej linijce wpisujemy funkcję, która ma zostać wywołana po załadowaniu biblioteki. W tym przykładzie jest to drawCharts().

W kolejnym kroku przygotujemy dane, które zaprezentujemy na wykresie:

function initData(){
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Województwo');
    data.addColumn('number', 'KWH na mieszkańca');
    data.addRows([
          ['Śląskie', 5451],
          ['Opolskie', 4887],
          ['Dolnośląskie', 4349],
          ['Mazowieckie', 4345],
          ['Łódzkie', 4238],
          ['Świętokrzyskie', 3790],
          ['Kujawsko-Pomorskie', 3680],
          ['Małopolskie', 3576],
          ['Pomorskie', 3493],
          ['Wielkopolskie', 3256],
          ['Lubuskie', 3255],
          ['Zachodniopomorskie', 3190],
          ['Lubelskie', 2425],
          ['Warmińsko-Mazurskie', 2424],
          ['Podkarpackie', 2376],
          ['Podlaskie', 2166]
    ]);

    return data;
}

function drawCharts(){
    var data = initData();
}

Przedstawienie danych w postaci tabeli

Aby zaprezentować dane w postaci tabeli dodajemy następujący kod

    var tableDiv = document.getElementById('table_div')
    var table = new google.visualization.Table(tableDiv);
    table.draw(data, {showRowNumber: true});

Przedstawienie danych w postaci wykresu słupkowego

Aby zaprezentować dane w postaci wykresu słupkowego dodajemy następujący kod

    var tableDiv = document.getElementById('table_div')
    var table = new google.visualization.BarChart(tableDiv);
    table.draw(data, {showRowNumber: true});

Przedstawienie danych na mapie

Aby zaprezentować dane na mapie dodajemy następujący kod

    
    var options = [];
    options['dataMode'] = 'regions';
    options['region'] = 'PL';
    var mapDiv = document.getElementById('map_div');
    var geomap = new google.visualization.GeoMap(mapDiv);
    geomap.draw(data, options);

Podsumowanie

To tylko kilka przykładów z dużej kolekcji dostępnych typów wizualizacji danych. Zainteresowanych innymi typami wykresów, zachęcam do przejrzenia oficjalnej dokumentacji.

Programowalna sieć

poniedziałek, 9 kwietnia 2012

Rysujemy wykresy za pomocą Google Chart API