Efektowne wykresy za pomocą Google Visualization API

data publikacji: 16.01.2009
Efektowne wykresy za pomocą Google Visualization API
kategoria: Skrypty client-side, Skrypty server-side autor: kamilgeneral
W tym tutorialu postaram się Wam przedstawić jak zrobić wykres kołowy i słupkowy (pionowy jak i poziomy) za pomocą Google Visualization API.

Wykres kołowy

Demo

Na początku musimy załadować JavaScript API.

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 jak 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>

Wykres słupkowy

Demo

Tak samo jak w poprzedni przykładzie rozpoczynamy od podlinkowanie JavaScript API.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Teraz jako rodzaj wykresu wybieramy columnchart jeśli chcemy wykres pionowy lub barchart dla wykresu poziomego.

google.load("visualization", "1", {packages:["columnchart"]});

Następnie rysowanie wykresu.

google.setOnLoadCallback(drawChart);

Tabelę danych tworzymy na tej samej zasadzie co poprzednio:

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Rok');
data.addColumn('number', 'Sprzedarz');
data.addColumn('number', 'Koszty');
data.addRows(4);

Tym razem dane się nam zmieniły. Też mamy numer, potem pod 0 mamy nazwę (w tym przykładzie rok), pod '1' pierwsza wartość, a pod '2' druga wartość.

data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);

I na koniec taki sam kod tak jak przedtem, więc nie będę go omawiał. Musimy typamiętać by podać ColumnChart jeśli mamy wykres pionowy, albo BarChart jeśli mamy poziomy.

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Zyski'});

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:["columnchart"]});

google.setOnLoadCallback(drawChart);

function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Rok');
data.addColumn('number', 'Sprzedarz');
data.addColumn('number', 'Koszty');
data.addRows(4);
data.setValue(0, 0, '2004');
data.setValue(0, 1, 1000);
data.setValue(0, 2, 400);
data.setValue(1, 0, '2005');
data.setValue(1, 1, 1170);
data.setValue(1, 2, 460);
data.setValue(2, 0, '2006');
data.setValue(2, 1, 660);
data.setValue(2, 2, 1120);
data.setValue(3, 0, '2007');
data.setValue(3, 1, 1030);
data.setValue(3, 2, 540);

var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Zyski'});
}
</script>
</head>

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

Podsumowanie

To co tutaj zaprezentowałem jest tylko ułamkiem możliwości Google Visualization API. Zachęcam do odwiedzenia oficjalnej strony. Można tam znaleźć pełną dokumentację oraz ciekawe przykłady zostosowań.

W połączeniu z umiejętnościami programistycznymi na bazie Google Visualization API można wyczarowań naprawdę wiele efektownie wyglądających rzeczy.
Udostępnij ten artykuł:
Zobacz podobne wpisy:

None Found
5133 Responses2009-01-16+16%3A35%3A15kamilgeneralhttp%3A%2F%2Fvivee.info%2F%3Fp%3D513 to “Efektowne wykresy za pomocą Google Visualization API”
1. Rivnx Design » Blog Archive » Wykresy - Google Visualization API pisze:
  
  16 01 2009 o 18:58
  
  [...] jak zrobić efektowne wykresy za pomocą Google Visualization API. Link znajduje się na stronie: http://vivee.info/2009/01/16/efektowne-wykresy-za-pomoca-google-visualization-api/ Napisano w Bez kategorii | Napisz [...]
  
  Odpowiedz
2. shai pisze:
  
  16 01 2009 o 21:25
  
  Czym różni się Google Visualization API od Google Chart API?
  
  Przy korzystaniu z wykresów Google’a korzystałem do tej pory z witryny G Charts API. G Visualization API wydaje się być szerszym tematem (?).
  
  Odpowiedz
3. KamilGeneral pisze:
  
  16 01 2009 o 22:35
  
  Chart API tworzy bardzo proste wykresy, za to Visualization bardziej efektowne i inne rzeczy (np. tabele z sortowaniem).
  
  Takie różnice zauważyłem tak na szybko…
  
  Odpowiedz
Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Powiadom mnie o nowym komentarzu do tego artykułu.

Top 10

CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
Skrypty client-side
Skrypty server-side
Tutoriale
Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
Wieczór z Open Source
Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.

Najnowsze newsy

Wieczór z Open Source 2010

Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej

Grafart.org i WACOM zapraszają na konkursy!

Witam!

Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej

Zapraszamy na forum graficzne Graffika.pl

Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej