Środa, 12 grudnia 2018 • 346 dzień roku • Imieniny: Aleksandra, Adelajdy, Dagmary Kontakt

Rysowanie 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

Tworzenie wykresu słupkowego w HTML

Obrót tekstu na płótnie (canvas)