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/