[Google Visualization API ] Efektowny wykres kołowy

Kategoria: Javascript, HTML i CSS



KamilGeneral
22 sierpień 2009 - 11:38
W tym tutorialu postaram się Wam przedstawić jak zrobić wykres kołowy i słupkowy (pionowy jak i poziomy) za pomocą Google Visualization API.
Google Visualization API jest to framework taki jak np. jQuery.

Wykres kołowy
Demo:  google1.html (1,1 KB)
Ilość pobrań: 7

Na początku musimy załadować Javascript API.
<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Następnie wybrać jaki chcemy wykres. W tym przypadku będzie to kołowy, czyli piechart.
google.load('visualization', '1', {'packages':['piechart']});

Rysowanie wykresu.
google.setonloadCallback(drawChart);

Teraz tworzenie tabeli. Musimy podać rodzaje i nazwy kolumn, oraz ilość rekordów.
function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Zadanie'); data.addColumn('number', 'Godzin dziennie'); data.addRows(5);

Pora na dane do tabeli. Teraz w naszych danych podajemy numer w jakiej kolejności mają być pokazywane rekordy (zaczynamy liczenie od zera). Po przecinku podajemy 0 jeśli chcemy podać następnie nazwę rekordy i w następnym wierszu 1 jeśli chcemy dać wartość.
data.setValue(0, 0, 'Spanie'); data.setValue(0, 1, 10); data.setValue(1, 0, 'Jedzenie'); data.setValue(1, 1, 1); data.setValue(2, 0, 'Szkoła'); data.setValue(2, 1, 8); data.setValue(3, 0, 'Kompter'); data.setValue(3, 1, 3); data.setValue(4, 0, 'Inne'); data.setValue(4, 1, 2);

Podajemy gdzie ma się pojawić wykres i jaki rodzaj . W tym przypadku pojawi się w divie o nazwie chart_div i rodzaju tak jad podaliśmy wcześniej PieChart.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

I na koniec wielkość, rodzaj (2D/3D) i nazwa całego wykresu.
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Mój dzień'});

Cały kod:
<html> <head> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load('visualization', '1', {'packages':['piechart']}); google.setonloadCallback(drawChart); function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Zadanie'); data.addColumn('number', 'Godzin dziennie'); data.addRows(5); data.setValue(0, 0, 'Spanie'); data.setValue(0, 1, 10); data.setValue(1, 0, 'Jedzenie'); data.setValue(1, 1, 1); data.setValue(2, 0, 'Szkoła'); data.setValue(2, 1, 8); data.setValue(3, 0, 'Kompter'); data.setValue(3, 1, 3); data.setValue(4, 0, 'Inne'); data.setValue(4, 1, 2); var chart = new google.visualization.PieChart(document.getElementById('chart_div')); chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Mój dzień'}); } </script> </head> <body> <div id="chart_div"></div> </body> </html>


Podobne tematy:
program do wykresow kolowych
Google Maps API - dane GPS??
Wykres kołowy
Google Maps API
Google Maps API
[Google Visualization API ] Efektowny wykres słupkowy Część 2