Zostałem wywołany do tablicy więc muszę odpowiedzieć. Jeden z czytelników zasugerował mi użycie biblioteki JavaScript o nazwie HighCharts https://www.highcharts.com. Jako, że zawsze lubiłem wykresiki to postanowiłem się z nią zapoznać. Na pierwszy ogień poszedł wskaźnik czyli „gauge”. By utworzyć sobie taki wskaźnik musimy mieć szkielet naszej strony gdzie wywołujemy odpowiednie skrypty wskaźnika oraz biblioteki jQuery.
Szkielet „czystej strony”:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Wykresy i wskaźniki</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
</head>
<body>
</body>
</html>
Potem musimy utworzyć zasobnik na nasz wskaźnik. Tworzymy go poprzez umieszczenie odpowiedniego div’a w kodzie strony (wymiary wedle upodobania, także inne „ostylowania”:
<div id="wsk1" style="width: 320px; height: 320px; border: 0 solid black; display: inline-block;"></div>
Następnie dodajemy już w <body> skrypt wywołujący nasz wskaźnik. Oczywiście skrypt ten będziemy musieli sobie napisać, zmodyfikować itp. – w każdym bądź razie będziemy musieli go mieć:
<script src="scripts/gauge1.js"></script>
Skrypt wskaźnika może być dość rozbudowany, bo jest dostępnych naprawdę wiele opcji konfiguracyjnych, które pozwalają tworzyć różnorodne wskaźniki. Poniżej skrypt wskaźnika – jak widać dosyć czytelny.
$(function () {
$('#wsk1').highcharts({
chart: {
type: 'gauge',
shadow: 'true'
},
pane: {
startAngle: -135,
endAngle: 135,
background: [{
borderWidth: 3
}, {
outerRadius: '100%',
borderWidth: 1
}
]
},
title: {
text: 'Temperatura'
},
subtitle: {
text: 'zewnętrzna A'
},
yAxis: {
min: -30,
max: 45,
minorTickInterval: 1,
minorTickLength: 5,
minorTickWidth: 1,
minorTickPosition: 'inside',
tickInterval: 5,
tickWidth: 2,
tickPixelInterval: 0,
tickColor: '#755',
plotBands: [{
from: -30,
to: 0,
color: '#0EF'
}, {
from: 15,
to: 25,
color: '#0F0'
},
{
from: 25,
to: 35,
color: '#FFEC84'
},
{
from: 35,
to: 45,
color: '#FF0000'
}
],
},
series: [{
name: 'temp. zew.',
data: [-3],
tooltip: {
hideDelay: 2000,
valueSuffix: ' °C'
}
}]
});
});
W rezultacie na stronie otrzymujemy taki oto wskaźnik jak ten umieszczony poniżej (nie jest on „żywy” bo ma zapisaną na stałe jedną tylko wartość ale to tak na początek).
Jeśli chcemy ożywić nasz wskaźnik to musimy go zasilić danymi (na początek niech będą to dane generowane co pewien interwał czasu i przypisywane do wskaźnika).
Do tego celu możemy wykorzystać funkcję, która będzie generować dane dla wskaźnika. Funkcja generuje dane przy za pomocą [Math.random] i w rezultacie w zmiennej [inc] mamy wartość zmiany, o którą zmieni się wartość na wskaźniku. Jeśli wartość „ucieknie” poza zakres 25-45 to będzie zmniejszana o przyrost tak aby „trzymać się” podanego zakresu.
// funkcja generująca dane dla wskaźnika (wykonywana co 573 ms)
setInterval(function () {
var chart = $('#wsk2a').highcharts(),
point, newVal, inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 5);
newVal = point.y + inc;
if (newVal < 25 || newVal > 45) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 573);
Ożywiony wskaźnik prezentuje się następująco:
Pełny kod „ożywionego” wskaźnika przedstawia się następująco:
$(function () {
$('#wsk2a').highcharts({
chart: {
type: 'gauge',
},
pane: {
startAngle: -75,
endAngle: 75,
background: [{
outerRadius: '110%',
backgroundColor: '#FFF',
borderWidth: 5
}, {
innerRadius: 0,
outerRadius: '100%',
backgroundColor: '#FEF3C1',
borderWidth: 1
}
]
},
title: {
text: 'Temperatura'
},
subtitle: {
text: 'wody C.O.'
},
yAxis: {
min: 0,
max: 60,
minorTickInterval: 1,
minorTickLength: 5,
minorTickWidth: 1,
minorTickPosition: 'inside',
tickInterval: 5,
tickWidth: 2,
tickPixelInterval: 0,
tickColor: '#667777'
},
plotBands: [{
from: 0,
to: 10,
color: '#007'
}, {
from: 20,
to: 45,
color: '#770000'
}],
series: [{
name: 'temp. wody c.o.',
data: [45],
tooltip: {
valueSuffix: '°C'
}
}]
});
// funkcja generująca dane dla wskaźnika (wykonywana co 573 ms)
setInterval(function () {
var chart = $('#wsk2a').highcharts(),
point, newVal, inc;
if (chart) {
point = chart.series[0].points[0];
inc = Math.round((Math.random() - 0.5) * 5);
console.log('inc=' + inc);
newVal = point.y + inc;
if (newVal < 25 || newVal > 45) {
newVal = point.y - inc;
}
point.update(newVal);
}
}, 573);
});
Poniżej przykłady jeszcze kilku innych wersji wskaźników, które może uzyskać (możliwości jest nieskoczenie wiele):
W kolejnym poście będzie o tym, jak dane z bazy (MySQL) wyświetlić na wykresie wykorzystując team PHP+MySQL (po stronie serwera) i HighCharts po stronie klienta.
