[Lazarus, TAChart] Pierwszy wykres

Tym poradnikiem zapoczątkuję nowy dział w którym będę notował tematy związane z programowaniem w Delphi i Lazarusie (aktualnie używam wersji 1.6_dfsg-1 pod Ubuntu, wersja FPC 3.0.0). Będzie to coś w stylu Tips & Trics, ale zapewne pełne skrótów myślowych - bo pewne rzeczy są dla mnie oczywiste, a to notatnik dla mnie :-D

Źródłem inspiracji (i w znacznej mierze tłumaczenia) jest strona Wiki Lazarus - http://wiki.freepascal.org/TAChart_Tutorial:_Getting_started, która jest kopalnią bez dna wszelkich inspiracji.

Jak wykonać pierwszy wykres w Lazarus Free Pascal? To proste. Chwila pracy i pierwszy wykres w Lazarusie będzie cię cieszył. Na wykresie łatwo i efektownie zaprezentujesz dane z czujników podłączonych do Arduino, temperatury, wilgotności, napięcia z ADC, itd.
Mam nadzieję, że znajdę czas na zaprezentowanie takiego poradnika.

Pierwszy wykres.

Oto nasz cel

Stworzymy wykres trzech standardowych funkcji trygonometrycznych:

y=cos(x),
y=sin(x), and
y=cos(x)*sin(x).

TAChart jest standardowo w Palecie komponentów (w dalszej części tekstu będę używał skrótu PK) Lazarusa w zakładce Chart.

1. Uruchom Lazarusa, jeśli nie masz domyślnie nowego projektu okienkowego to z go utwórz. Najlepiej za pomocą Project Wizard (Czarodziej projektu) klikając New Project.

i dalej

Pusty projekt mamy gotowy.

2. W Inspektorze obiektów (w dalszej części tekstu będę używał skrótu IO) wybieramy nasz jedyny do tej pory obiekt, czyli Form1 i w zakładce Właściwości zmieniamy wysokość i szerokość formy, czyli Height na 250 i Width na 650.

3. Teraz z PK z zakładki Chart wybieramy komponent TChart (pierwszy z lewej Form1

) i stawiamy na naszej formie.


4. Następnie musimy wybrać rodzaj wykresu - dodamy serie danych w postaci linii. W tym celu musimy wywołać okienko Edit series dla naszego wykresu, aby to osiągnąć możemy:
- kliknąć dwa razy na naszym wykresie, lub
- kliknąć prawym przyciskiem myszki na wykresie w celu wywołania menu kontekstowego z którego wybieramy Edit series, lub
- lub z IO wybieramy nasz wykres Chart1 i klikamy na nim prawym klawiszem myszki i z menu kontekstowego wybieramy oczywiście Edit series. 

U góry okna Edit series klikamy przycisk Add i z listy wszystkich dostępnych rodzajów wykresów wybieramy Line series (co widać na powyższym obrazku).
Powtarzamy to aż będziemy mieć trzy "podobiekty" - Chart1LineSeries1, Chart1LineSeries2 i Chart1LineSeries3, jak pokazuję niżej.

Zamykamy okienko Edit Series - Chart1. Na tym etapie jeszcze nic nie widać bo nie mamy podłączonych danych do naszych serii. Prosta zasada - nie ma danych, to nie ma wykresu. Za chwilę się tym zajmiemy.
Zanim przejdziemy dalej przyglądnijmy się jak wygląda drzewo obiektu Chart1 w IO. TAChart używa dość skomplikowanej architektury obiektów i kontenerów, dlatego ważne jest aby to zrozumieć. Widzimy obiekt Chart1 typu TChart i jego dzieci - Chart1LineSeries1, Chart1LineSeries2, Char1tLineSeries3 i AxisList i jego dzieci, czyli Left i Bottom.

Trochę uporządkujmy na koniec (oczywiście można to robić):
- wybierz nasz wykres i jego właściwość Align ustaw na alClient. 
- zmienimy nazwy naszych serii danych na bardziej przyjazne i intuicyjne. W IO w drzewie obiektów wybieramy kolejno obiekt Chart1LinesSeries1 i wybieramy jego właściwość Name zmieniamy na SinSeries, obiekt Chart1LineSeries2 właściwość Name zmieniamy na CosSeries i obiekt Chart1LineSeries3 właściwość Name zmieniamy na SinCosSeries. Nasze drzewo obiektów prezentuje się teraz tak:

5. Dodajemy dane.
W naszym przypadku najłatwiej będzie wygenerować dane przy okazji tworzenia formy, dlatego napiszemy procedurę obsługi zdarzenia (we write a handler) dla zdarzenia OnCreate naszej formy. Oczywiście w "prawdziwym" projekcie dane możesz dodać przy innej okazji. Wszystko zależy od twoich założeń, np. możesz dodać dane po kliknięciu w przycisk, który zainicjuje jakieś obliczenia, których wynik ma być zaprezentowany w formie wykresu, lub odczytać dane z pliku, czy bezpośrednio portu szeregowego.
W IO wybierz obiekt Form1 i zakładkę Zdarzenia. Znajdź OnCreate i pustym polu nazwy kliknij dwa razy. Zostaniesz przeniesiony do Edytora źródeł w którym Lazarus stworzy szkielet pustej procedury o nazwie procedure TForm1.FormCreate(Sender: TObject);
Nasza gotowa procedura powinna wyglądać tak:

procedure TForm1.FormCreate(Sender: TObject);
const
  N = 100;
  MIN = -10;
  MAX = 10;
var
  i: Integer;
  x: Double;
begin
  for i:=0 to N-1 do begin
    x := MIN + (MAX - MIN) * i /(N - 1);
    SinSeries.AddXY(x, sin(x));
    CosSeries.AddXY(x, cos(x));
    SinCosSeries.AddXY(x, sin(x)*cos(x));
  end;
end;


Tworzy ona po 100 punktów danych dla każdej serii. Wartości x są obliczane jednocześnie dla wszystkich trzech serii, pomiędzy MIN i MAX, w naszym przykładzie od -10 do 10. Najważniejsze w tej procedurze jest wywołanie metody AddXY dla każdej serii danych, to ona przekazuje dane każdego punktu jako współrzędne x i y do wewnętrznej listy. Jest również wersja przeciążona tej metody gdzie możesz przekazać dodatkowo etykietę w postaci tekstu, jak również kolor. Jednak w naszym pierwszym przykładzie nie będziemy tego używać.
Wspomniana wewnętrzna lista jest źródłem wykresu - jest to klasa która dostarcza dane do wykreślenia.
Wspomnę tylko, że możesz użyć wbudowanego źródła wykresu lub możesz podłączyć zewnętrzną serię danych. Są różne odmiany źródeł danych dla wykresu - znajdziesz je w PK w zakładce Chart:

• TListChartSource - zapamiętuje dane w formie listy (tego typu lista jest użyta przez naszą serię wewnętrznie),
• TDBChartSource - pobiera dane z rekordów umieszczonych  w bazie danych,
• TUserDefinedChartSource -  daje bardzo ogólny dostęp do danych, np. zapamiętanych w tablicy rekordów zdefiniowanych przez użytkownika,
• TCalculatedChartSource - umożliwia analizę jakiejś serii danych i wyświetlenie wyniku.

Wystarczy na tym etapie teorii na temat źródeł. Zajmijmy się wbudowanym źródłem, które użyjemy w naszym projekcie.

Jeśli skopiowałeś lub przepisałeś procedurę obsługi przerwania OnCreate dla naszej formy to skompiluj i uruchom projekt (F9). Powinieneś zobaczyć coś takiego:

Coś widać ale szału nie ma. Musimy się trochę postarać aby upiększyć nasz wykres.

6. Formatujemy serie

W IO wybieramy kolejno nasze serie. Zaczynamy od SinSeries i w zakładce Właściwości szukamy właściwości SeriesColor - to ona odpowiada za kolor naszej linii. Wybieramy już zdefiniowany kolor clRed. Odpowiednio dla CosSeries ustawiamy clBlue i dla SinCosSeries ustawiamy clGreen. Kompilujemy. Wygląda lepiej.

7. Dodajemy legendę
W IO wybieramy nasz wykres (lub na formie - jeśli tak wolisz) i w zakładce Właściwości szukamy właściwości Legend, rozwijamy ją i szukamy "podwłaściwości" Visible. Domyślnie Visible jest ustawiona na False, a my ją zmienimy na True co spowoduje wyświetlenie legendy. Efekt można już zauważyć w czasie projektowania - pojawi się legenda po prawej stronie wykresu.
Fajnie byłoby jeszcze opisać, która linia jest którą funkcją. Zróbmy to. W IO znów wybierzmy kolejno nasze serie. Zacznijmy od początku, czyli SinSeries i następnie w zakładce Właściwości odszukaj właściwość Title i wpisz jej wartość na y = sin(x) i znowu odpowiednio dla CosSeries właściwość Title, y = cos(x), dla SinCosSeries Title będzie zawierało  y=sin(x)*cos(x). Ponownie nasze zmiany widać bez kompilacji - oczywiście możesz skompilować i uruchomić naszą aplikację.
Powinieneś zobaczyć coś podobnego do tego obrazka:

Umieścimy jeszcze legendę pod wykresem. W IO wybierz nasz wykres Chart1. W zakładce Właściwości znajdź Legend i rozwiń ją, potem znajdź Alignment i zmień ją na laBottomCenter. Poniżej znajdziesz właściwość ColumnCount i ustaw ją na 3.

8. Dopieszczamy
Dodajmy nazwy osi. W IO wybierz "podobiekt" 0 - Left i w zakładce Właściwości rozwiń grupę właściwości Title, znajdź Caption i wpisz do niej Oś Y.  Poniżej w tej grupie znajdziesz właściwość Visible, która jest ustawiona na False - zmieńmy ją True aby pojawiła się nazwa.
Analogiczne czynności wykonaj dla 1 - Bottom, tylko oczywiście oś nazwij Oś X.
Zmieńmy jeszcze styl czcionki na bold. W grupie Title znajdziesz "podgrupę" Font, którą rozwiń a w niej znajdziesz kolejną "podgrupę" Style i w niej właściwość fsBold ustaw na True.
To samo wykonaj dla drugiej osi.

Dodajmy jeszcze tytuł dla naszego wykresu.
Czynności będą bardzo podobne do wspomnianych wyżej. W IO wybierz nasz wykres Chart1, a następnie we Właściwościach znajdź "grupę" Title i rozwiń ją. Znajdziesz w niej właściwość Text typu TStrings - kliknij na przycisk z wielokropkiem. Pojawi się okno w którym wpisz Mój pierwszy wykres. Zamknij okienko przyciskiem OK.
Pod spodem jest oczywiście właściwość Visible ustawiona domyślnie na False - zmieniamy ją oczywiście na True. Powinien się pojawić tytuł nad naszym wykresem.
Zmieńmy trochę czcionkę, czyli w grupie Title znajdź grupę Font i po prawej stronie kliknij na przycisk wielokropka.

Pojawi się standardowe okno wyboru czcionki - ja ustawiłem rozmiar 10 i styl bold. Zatwierdzamy przez OK. Mamy coś podobnego:

Na koniec zmienimy tło naszego wykresu oraz lekko rozjaśnimy przerywane linie pomocnicze.
W IO wybieramy nasz wykres Chart1, w zakładce Właściwości szukamy właściwości BackColor i zmieniamy jej wartość na zdefiniowany biały czyli clWhite - od razu lepiej.
Teraz te linie - w IO wybierz  0 - Left i we Właściwościch znajdź "grupę" Grid a w niej "podobiekt" Color i zmień na clSilver - prawda, że lepiej. Teraz w drzewie IO kliknij 1 - Bottom i zrób to samo co przed chwilą, czyli zmień Color na clSliver.

Gratuluję!

Oto wynik końcowy: