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.
