Bitcoin BTC
Litecoin LTC
Dashcoin DASH
Dogecoin DOGERysowanie wykresów schodkowych w HTML
Wykres schodkowy (ang. step chart) stosujemy w przypadku danych pojawiających się w nieregularnych odstępach czasu, np. do prezentacji zmian stóp procentowych (zobacz: aktualne wykresy podstawowych stóp procentowych NBP). Innym przykładem funkcji schodkowej może być np. dystrybuanta dyskretnego rozkładu prawdopodobieństwa.
Uwaga: Do poprawnego działania skrypt wymaga biblioteki jQuery.
Przygotowanie danych
W przypadku prezentowanego w niniejszym artykule skryptu dane źródłowe zostały zapisane w formacie JSON (JavaScript Object Notation) i umieszczone w osobnym pliku. Są przetwarzane asynchronicznie, zatem nie opóźniają ładowania pozostałych elementów strony www. Pobieranie danych z odrębnego pliku ułatwia ich ewentualną aktualizację/zmianę.
Poniżej znajduje się przykładowa zawartość pliku źródłowego:
{"symbol":"","name":"","quotes":[{"date":"2013-01-01","value":"2"},
{"date":"2013-01-10","value":"3"},
{"date":"2013-01-15","value":"5"},
{"date":"2013-02-01","value":"7"},
{"date":"2013-02-15","value":"11"},
{"date":"2013-03-01","value":"13"},
{"date":"2013-04-01","value":"17"},
{"date":"2013-04-15","value":"13"},
{"date":"2013-05-01","value":"11"},
{"date":"2013-07-01","value":"7"},
{"date":"2013-08-15","value":"5"},
{"date":"2013-09-01","value":"3"},
{"date":"2013-12-01","value":"2"}]}
Wykres przykładowych danych (od 2013-01-01 do dnia bieżącego):
Tworzenie wykresu krok po kroku
1. Dołącz bibliotekę jQuery do swojej strony. W tym celu pobierz ją ze strony jQuery.com. Następnie pobrany plik umieść w wybranym katalogu (wygodnie jest utworzyć osobny katalog, w którym będą umieszczane wszystkie skrypty). Na koniec dodaj w sekcji HEAD dokumentu HTML kod (może się różnić nazwą katalogu i wersją pobranej biblioteki):
<script src="/javascript/jquery-1.9.1.min.js"></script>
Uwaga: Biblioteka udostępniana jest w dwóch "wariantach" jQuery 1.x i jQuery 2.x. Różnica między nimi polega na tym, że jQuery 2.x nie obsługuje starszych wersji Internet Explorera, tj. 6, 7 i 8.
2. Pobierz paczkę, rozpakuj i umieść pliki w wybranym katalogu na swoim serwerze. Paczka składa się z dwóch plików: skryptu stepchart.js i pliku z przykładowymi danymi źródłowymi stref.NBP-part.jsn. Możesz utworzyć własny plik z danymi (muszą być przygotowane w formacie JSON zgodnie z podanym wcześniej przykładem).
3. Umieść w wybranym miejscu na swojej stronie poniższy kod (pamiętaj o wpisaniu nazwy katalogu, do którego skopiowałeś pobrane pliki).
<script src="/nazwa_katalogu/stepchart.js"></script>
4. W efekcie powinieneś uzyskać przykładowy wykres stopy referencyjnej NBP w latach 2002-2012:
Zobacz też:
Tworzenie wykresu liniowego w HTML