Language Switcher
Wykresy Danych - Highcharts
- Szczegóły
Dane przechowywane w bazie SQL można obrabiać na wiele sposobów. Niniejszy artykuł przedstawia sposób prezentowania ich w postaci wykresów dostępnych przez przeglądarkę internetową.
Prezentowanie danych z bazy wymaga 2 elementów:
- Przygotowania serwera do wysyłania danych w odpowiednim formacie. O tym jak umieszczać dane w bazie SQL, oraz jak wygląda struktura bazy wykorzystywanej przez poniższe skrypty opowiada odrębny artykuł w dziale FUNKCJE.
- Przygotowanie strony www do wysyłania zapytań do serwera i prezentowania otrzymanych danych w postaci wykresu.
Krok I - Skrypt PHP do umieszczenia na serwerze WWW. Przykładowa nazwa pliku to "sql.php"
<?php
//jeśli chcesz wysyłać zapytania do niniejszego skryptu z pliku html
//przechowywanym na dysku lokalnego komputera - odznacz poniższą linię
//header('Access-Control-Allow-Origin: *');
// w komendach "mysql_..." zamień odpowiednio:
// xxxx - adres serwera (np: www.abc.pl)
// yyyy - użytkownik
// zzzz - hasło
// qqqq - nazwa bazy danych
// uwaga na wielkość znaków!
mysql_connect("xxxx", "yyyy", "zzzz") or die(mysql_error());
mysql_select_db("qqqq") or die(mysql_error());
// określenie zakresu dat: z ostatnich 3 dni
$phpdate=time()- (3*24 * 60 * 60);
$datefrom = date( 'Y-m-d H:i:s', $phpdate );
$dateto = date( 'Y-m-d H:i:s', time() );
$data = mysql_query("SELECT * FROM Temperatures WHERE `Timestamp` > '$datefrom'
AND `Timestamp` < '$dateto' ORDER BY Timestamp ASC") or die(mysql_error());
$rowcount = mysql_num_rows($data);
$counter=1;
// przygotowanie odpowiedzi na potrzeby Highcharts:
echo '{
"title": {"text": "Temperatura zewnętrzna"},
"chart": {"renderTo": "container"},
"series": [{"name": "Zewnętrzna", "data":[';
// uzupełnianie danych z bazy,
// interesujące nas dane są przykładowo w kolumnie "Temp4":
while($r = mysql_fetch_assoc($data)) {
echo '['.strtotime($r["Timestamp"])*1000 . ', '.$r["Temp4"]/10 .']';
if($counter < $rowcount){
echo ", ";
}
$counter=$counter+1;
}
// kończenie odpowiedzi
echo' ]}]}';
mysql_free_result($data);
?>
Krok II. Przygotowanie pliku html, który odczyta i zaprezentuje dane
<!DOCTYPE HTML>
<html>
<head>
<html xmlns="http://www.w3c.org/1999/xhtml"; xml:lang="pl" lang="pl">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Wykres Temperatury</title>
<!-- pliki js znajdziesz na www.jquery.com i www.highcharts.com-->
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/highcharts.js"></script>
<script type="text/javascript" src="/js/grid.js"></script>
<script type="text/javascript">
var options;
$(document).ready(function() {
options = {
//jest ich bardzo wiele,
//po szczegóły zapraszam na www.highcharts.com
//lub do przykładu zamieszczonego na końcu
};
$.getJSON("http://www.twoj_serwer.pl/sql.php", function(json) {
var options1 = $.extend(json, options);
chart = new Highcharts.Chart(options1);
});
});
</script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
Przykład wykresu z rozbudowaną listą parametrów dostępny jest pod adresem http://www.edom-plc.pl/wago/temperatury.html