Umiejąc już wyciągać dane z naszej bazy MySQL, możemy je jakoś ładnie zaprezentować. Chciałem, aby dane prezentowane były na bieżąco, oraz aby wykres był interaktywny – to znaczy, żeby coś się ruszało, coś się podświetlało, a nie tylko surowy obrazek… Pomocnym narzędziem okazał się produkt firmy Google – Charts. Za jego pomocą jesteśmy w stanie wykonać taki właśnie wykres.

1. Przygotowanie danych

Najpierw musimy przebudować nieco funkcję foreach z poprzedniego wpisu. Dane muszą mieć odpowiednią strukturę, tworzymy z nich tablicę. W kolejnej linii oddzielamy wartości tablicy przecinkami.

foreach ($all_brands as $value): 
	$do_wykresu[] = "['".$value->brand."', ".$value->liczba."]";
endforeach;

$data_for_chart = implode(",", $do_wykresu);

2. Rysowanie

Tutaj importujemy API, dodajemy opcje i parametry, ustalamy rodzaj i wielkość wykresu, a div z linii 34 narysuje nam to co ustawimy.

<!-- WYKRES GOOGLE -->

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

	// Load the Visualization API and the piechart package.
	google.load('visualization', '1.1', {'packages':['corechart']});

	// Set a callback to run when the Google Visualization API is loaded.
	google.setOnLoadCallback(drawChart);

	// Callback that creates and populates a data table,
	// instantiates the pie chart, passes in the data and
	// draws it.
	function drawChart() {

	     // Create the data table.
	     var data = new google.visualization.DataTable();
	     data.addColumn('string', 'Marka');   // dodawanie kolumny
	     data.addColumn('number', 'Ilość');
	     data.addRows([
	       <?php echo $data_for_chart; ?>
	     ]);

	     // Set chart options
	     var options = {
                           'width':600,
                           'height':500,
                           tooltip:{text:'percentage'},
                           'is3D': true
             };

	     // Instantiate and draw our chart, passing in some options.
	     var table = new google.visualization.PieChart(document.getElementById('piechart_3d'));
	     table.draw(data, options);
	}
</script>

<div id="piechart_3d"></div>

<!-- KONIEC WYKRESU GOOGLE -->

3. Prezentacja

Wstawiam tutaj tylko obrazek, tak dla zobrazowania ale w pełni działający wykres można zobaczyć tutaj -> http://www.tech-sas.pl/serwis/status/