Bitcoin BTC
Litecoin LTC
Dashcoin DASH
Dogecoin DOGERysowanie wykresów liniowych w HTML
W celu utworzenia wykresu użyjemy elementu canvas (wprowadzony w HTML5). Dane źródłowe zapiszemy formacie JSON i umieścimy w osobnym pliku.
Do poprawnego działania skrypt wymaga dołączenia biblioteki jQuery (biblioteka programistyczna dla języka JavaScript). Dane wejściowe przetwarzane są w sposób asynchroniczny, co zapobiega opóźnieniu ładowania się innych elementów strony.
function getData() {
var dataUrl = 'CHF.NBP-part.jsn';
$.ajax({
type: "POST",
url: dataUrl,
dataType: "json",
success: function(data) {
drawMargins();
drawGrid(6,8)
drawChart(data);
return data;
}
});
}
Jak dodać bibliotekę jQuery do swojej strony internetowej?
1. Oczywiście, najpierw trzeba pobrać bibliotekę np. ze strony jQuery.com. Biblioteka jest udostępniana 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. Pobrany plik należy następnie umieścić w wybranym katalogu. Wygodnie jest utworzyć osobny katalog, w którym będą umieszczane wszystkie używane skrypty.
3. Ostatnim krokiem jest dodanie w sekcji HEAD dokumentu HTML poniższego kodu (może się różnić nazwą katalogu i wersją pobranej biblioteki).
<script src="/javascript/jquery-1.9.1.min.js"></script>
Jak przygotować dane źródłowe?
Wyświetlane na wykresie dane są zapisane w formacie JSON (JavaScript Object Notation) i znajdują się w osobnym pliku. Poniżej znajduje się przykład formatowania danych zawartych w pliku źródłowym. W prezentowanej wersji skryptu wyświetlane są wyłącznie wartości pól "value". Pozostałe pola nie są brane pod uwagę.
{"symbol":"","name":"","unit":"",
"quotes":[{"date":"","value":"2.5"},
{"date":"","value":"2.3"},
{"date":"","value":"2.6"},
{"date":"","value":"2.4"},
{"date":"","value":"3.9"},
{"date":"","value":"3.3"},
{"date":"","value":"3.8"},
{"date":"","value":"2.3"},
{"date":"","value":"2.6"},
{"date":"","value":"2.4"},
{"date":"","value":"3.3"}]}
W efekcie uzyskujemy następujący wykres:
Tworzenie wykresu krok po kroku
1. Dodaj bibliotekę jQuery. Patrz - opis powyżej.
2. Pobierz paczkę, rozpakuj i umieść pliki w wybranym katalogu na swoim serwerze. Paczka składa się z dwóch plików: skryptu linechart.js i pliku z przykładowymi danymi źródłowymi CHF.NBP-part.jsn.
3. Edytuj wedle potrzeby plik z danymi źródłowymi w formacie JSON. Pamiętaj, że powinien być on umieszczony w tym samym katalogu co skrypt (możesz to zmienić, edytując ścieżkę dostępu do pliku). Struktura pliku i sposób jego modyfikacji zostały omówione na początku artykułu.
4. Umieść w wybranym miejscu na swojej stronie poniższy kod (pamiętaj o wpisaniu nazwy katalogu, w którym umieściłeś pobrane pliki).
<script src="/nazwa_katalogu/linechart.js"></script>
5. W ostatnim kroku powinieneś uzyskać efekt w postaci wykresu pokazującego przykładowe dane, tj. kursy średnie NBP franka szwajcarskiego w latach 2007-2008:
Zobacz też:
Tworzenie wykresu schodkowego w HTML