Zaawansowane korzystanie z Google Charts

Wykresy na stronie to dla większości użytkowników zbędna rzecz. Jednak w kilku przypadkach bywa z tym ogromny problem i jeśli chcemy coś pokazać w formie właśnie wykresu to mamy nie mały ból głowy jak to zobrazować. Zazwyczaj kończy się to na obrazu z Photoshop’a, albo na podobnej zasadzie.
Bardzo ciekawa propozycja dla wszystkich dale Google, który pozwala na szybkie i łatwe wstawiania wykresów na stronie. Google Chart API udostępnia dla webmasterów kilka typów wykresów, m.in. pie chart, kolumnowy, liniowy. A więc najbardziej popularne i w zupełności wystarczające.
Warto przy tym jeszcze wspomnieć, iż wykresy Googla można uzyskać na dwa z goła odmienne sposoby. Pierwszy jest w formie obrazka (img), drugi to już dynamicznie ładowane przez biblioteki Googla.
API Googla w tej kwestii pokazuje wyłącznie na „sztywnych danych”. Poniżej pokaże, jak przekształcić skrypt, żeby pobierać dane z bazy danych MySQL.

Wykres słupkowy i liniowy

Prezentacje i edycje tych wykresów pokaże na przykładzie kodu z wykorzystaniem img src (pierwszy sposób prezentacji danych).
Cały kod prezentacji wykresu jest napisany w javascript. My jednak chcąc tak przerobić skrypt będziemy musieli dodać kilka linijek kodu php, a więc trzeba na pewno zmienić sam plik z HTML na PHP.

Całość skryptu, który udostępnia Google Charts API wygląda następująca:

<img src="http://chart.apis.google.com/chart?cht=bvg&amp;chs=1000x300&chd=t:55,67,23,36,78,45&chxt=x,y&chxl=0:|1|2|3|4|5|6" alt="???">

???
A więc wszystkie dane zawierają się w źródle src. Najważniejsze informacje, a więc dane na wykresie przypisane są do zmiennej t:

t:86,68,62,59,55,51

Oraz do zmiennej 0, jako etykiety danych.

Połączenie z bazą MySQL

Dla potrzeb prezentacji stworzyłem na szybko bazę danych z dwoma kolumnami. Pierwsza to liczba_porzadkowa a druga to wartość. Będzie to ba zasadzie 31 dni i przypisana do każdego dnia temperatura.

Funkcja php

Po pierwsze tworzymy zmienne dla nas potrzebne dla t i 0.

$tekstdane="t:";
$tekstetykiety="0:|";

Dlej jest zapytanie do bazy o nasze dane:

$temperatura = mysql_query("SELECT `id_temp`,`pomiar` FROM ewd_temp");
$liczbapozycji=mysql_num_rows($temperatura);

Ostatnią już rzeczą jaką należy zrobić to stworzyć pętle, która do zmiennych $tekstdane i $tekstetykiety przyporządkuje wartości.

$nr=0;
while ($rekord = mysql_fetch_array($temperatura,MYSQL_ASSOC))
{
$nr++;
  $tekstdane= $tekstdane . $rekord['pomiar'] ;
  if ($nr<$liczbapozycji) $tekstdane.=",";//ostatni bez przecinka
  	
  $tekstetykiety= $tekstetykiety . $rekord['id_temp'] ."|";
}

Po takim zapytaniu, nasza zmienna $tekstdane jest dokładnie taka jak wymaga tego wykres, a więc posiada wartości z przecinkami: 22,24,14,…
Kolejna zmienna to już tworzenie zawartości obrazka:

$zrodloobrazka1="http://chart.apis.google.com/chart?cht=bvg&amp;chs=1000x300&chd=".$tekstdane."&chxt=x,y&chxl=".$tekstetykiety;

W miejsca t oraz 0 podstawiamy nasze zmienne, które posiadają wartości wyciągnięte z naszej bazy.
i na koniec wystarczy stworzyć obrazek z Google chart:

echo '<img src="'.$zrodloobrazka1.'"alt="" />';

Jak widać bardzo dobrze prezentuje się nasz wykres słupkowy. Dokładnie tak samo wygląda wykres liniowy, który ma nieco inną składnie źródła obrazka. Tutaj już nic nie modyfikujemy tylko wstawiamy analogicznie do tego jak powyższy przykład.

$zrodloobrazka2="http://chart.apis.google.com/chart?cht=lc&chs=1000x300&chd=".$tekstdane."&chxt=x,y&chxl=".$tekstetykiety;

Różnica jest wyłącznie w źródle i dotyczy rodzaju wykresu. Dla słupkowego to:
http://chart.apis.google.com/chart?cht=bvg&
Dla liniowego:
http://chart.apis.google.com/chart?cht=lc

Wykres pie chart

Inaczej ma się wykres kołowy do liniowego i słupkowego. W tym przypadku mamy całkiem inny kod, nie działa to już na zasadzie obrazka. Mamy też całkiem inny rodzaj wstawiania danych.
Skrypt, który udostępnia Google wygląda następująco:

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Składniki');
      data.addColumn('number', 'Ilość');
      data.addRows([
        ['kalafior', 3],
        ['cebula', 1],
        ['oliwki', 1], 
        ['papryka', 1],
        ['szynka', 2]
      ]); 

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Jak widzimy nie ma zbyt wiele podobieństw z wyżej pokazanym przykładzie. Jednak dla nas najważniejsze z tego skryptu to dodawanie kolumn, który odbywa się poprzez:

 data.addColumn('string', 'Składniki');
 data.addColumn('number', 'Ilość');

Kolejno rodzaj danych, oraz etykieta danych.
Forma przechowywania danych jest w tablicy w określony sposób:

        ['kalafior', 3],
        ['cebula', 1],
        ['oliwki', 1], 
        ['papryka', 1],
        ['szynka', 2]

Następnie jest funkcja z opcjami wykresu, który później opiszę.

Edycja danych

Dla potrzeb tego wykresu również stworzyłem przykładową bazę danych z polami miasta, szkoły. A więc pierwsza to pole typu string, druga to number. A więc nic nie zmieniam w tym elemencie, bo takie pola mnie interesują. Można oczywiście dodawać, w zależności od potrzeb kolumny.
My natomiast na pewno musimy zmienić obszar danych do wyświetlania. Z formy stałej zapisanej, znowu będziemy je pobierać z bazy danych w trochę inny sposób.

$list = mysql_query("SELECT * FROM ewd_pie");
	while($row = mysql_fetch_assoc($list)){
		$data[] = "['".$row['miasta']."', ".$row['szkoly']."]";
		}
	$data_for_chart = implode(",", $data);

Po zapytaniu o bazę tworzymy pętlę while, która do tablicy $data[] wstawi sobie rekordy z bazy. $row[‚miasta’] musi być stringiem i dlatego przed zmienną dodatkowo są znaczki ”. Mamy już gotową pętle z danymi. Jednak taka forma nie pozwoli nam na wyświetlenie w formie wykresu. Musimy jeszcze dodać funkcję implode, która rozdzieli dane po przecinku (,).
Dla pokazania jak wyglądają dane bez przecinka możemy je wypisać na ekranie za pomocą:

print_r($data);
Array ( [0] => ['Warszawa', 120] [1] => ['Katowice', 140] [2] => ['Madryt', 330] [3] => ['Londyn', 530] [4] => ['New York', 1100] [5] => ['Pekin', 1500] ) 

Mając już gotowe dane w miejsce:

 data.addRows([
        ['kalafior', 3],
        ['cebula', 1],
        ['oliwki', 1], 
        ['papryka', 1],
        ['szynka', 2]
      ]); 

Wklejamy

 data.addRows([
         <?php echo $data_for_chart; ?>
         ]);	

Opcje wykresu

Na tym etapie możemy śmiało zakończyć nasz skrypt i wykres będzie się prezentował jak powyższy wykres (org. z Google Charts API).

Jednak dodają do niego kilka opcji, możemy go w prosty sposób zmienić i do naszego gustu dostosować. Oto kilka opcji, dla których komentarz chyba jest zbędny.

var options = {'title':'Schools in the cities',
	  titleTextStyle: {fontName: 'Lato', fontSize: 22, bold: true},
                      height: 400,
                      is3D: true,
		      colors:['#FE80C0','#009A9A','#76BCFF','#8D708E','#E74C3C','#27AE60'],
                     'width':700,
                     'height':500};

Finalna wersja naszego wykresu prezentuje się następująco:

Cały skrypt:

<?php
	$list = mysql_query("SELECT * FROM ewd_pie");
	while($row = mysql_fetch_assoc($list)){
		$data[] = "['".$row['miasta']."', ".$row['szkoly']."]";
		}
	$data_for_chart = implode(",", $data);
	//print_r($data_for_chart);

?>

    <!--Load the AJAX API-->
    <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.0', {'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', 'Miasta');
      data.addColumn('number', 'Ilość szkół');
      data.addRows([
         <?php echo $data_for_chart; ?>
         ]);		

      // Set chart options
      var options = {'title':'Schools in the cities',
	  titleTextStyle: {fontName: 'Lato', fontSize: 22, bold: true},
                      height: 400,
                      is3D: true,
		      colors:['#FE80C0','#009A9A','#76BCFF','#8D708E','#E74C3C','#27AE60'],
                     'width':700,
                     'height':500};

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

    <div id="chart_div" style="width:400; height:300"></div>

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code