KamilGeneral
22 sierpień 2009 - 11:45
Tym razem stworzymy za pomocą Google Visualization API wykres słupkowy.
Część pierwsza tutaj.

Wykres słupkowy
Demo:  google2.html (1,19 KB)
Ilość pobrań: 4

Tak samo jak przedtem dajemy 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"]});

Oczywiście rysowanie wykresu.
google.setonloadCallback(drawChart);

Tworzenie tabeli na tej samej zasadzie co wcześniej.
function drawChart() { var data = new google.visualization.DataTable(); data.addColumn('string', 'Rok'); data.addColumn('number', 'Sprzedarz'); data.addColumn('number', 'Koszty'); data.addRows(4);

Teraz dane się nam zmieniły. Też mamy numer, potem pod 0 mamy nazwę (w tym przykładzie rok), pod 1 pierwsza wartość i 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ędze omawiał. Tylko, że musimy 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> </html>


Podobne tem