Următorul exemplu descrie cum puteţi crea un grafic de tip LineChart în Flex prin utilizarea datelor statice dintr-un sir de valori. Graficul LineChart este creat folosind sintaxa MXML fără cod ActionScript. Exemplu vă arată cum puteţi crea un grafic cu o animatie simplă, fără sa fie nevoie de cunostinte  ActionScript (cu ActionScript puteţi crea grafice mai dinamice şi interactive, dar pentru inceput aceasta este cea mai simplă abordare).

Pentru a face acest exemplu, aveţi nevoie de Adobe Flash Builder 4 (dacă eşti student sau cadru didactic in instituţii de învăţământ eligibile, puteţi beneficia de programul Flex gratuit pentru Educaţie)

1. Se deschide Adobe Flash Buider 4 (sau Adobe Flex Builder 3) şi selectaţi New -> MXML Application

2. Se indica numele aplicatiei, LineChartExample, şi selectaţi un layout pe verticală (componentele vor fi afişate unul după altul, de sus in jos)

3. Structura MXML implicită a acestei aplicatii este (folosind cele 2 butoane de deasupra zonei de editare, Source sau Design, se poate schimba modul de editare al aplicatiei Flex):

4. Se definesc datele utilizate de grafic intr-un vector (array). După tag-ul </fx: Declarations> se adăuga declaraţia:

După cum puteţi vedea, există 2 liste de valori. Fiecare listă are 8 elemente, care reprezintă valorile pereche pentru o dată şi o valoare. De exemplu, {Month: "22 nov", value: 4.1274}, reprezintă un element din lista ce are 2 valori (pentru data de 22 nov s-a inregistrat vaoarea 4.1274). Valorile de tip sir de caractere sunt plasate între "". Fiecare element al sirului este separat de , (virgula).

5. Adăugaţi diagramă linie. Există 2 moduri de a face asta:

• din modul de Design selectaţi componenta diagramă linie şi glisaţi-l pe scena, dupa care a stabilit 2 elemente serie şi legenda;

• în sursa MXML sev adauga dupa tag-ul </fx: script> urmatoarea definitie:

6. Se face legătura între linia din grafic şi seria de date prin adăugarea la tag-ul <mx:lineseries…/> a proprietatii dataProvider; de asemenea, se indica valoarea utilizata din seria de valori prin proprietatea yField; liniile devin:

7. Se adauga valorile pe axa orizontală  (sunt folosite valorile de tip data din seria de valori). Se adauga elementul <mx:horizontalAxis> între <mx:LineChart> şi </mx: LineChart>

8. Se definesc valorile minime si maxime pentru axa verticala prin adaugarea elementului <mx:verticalAxis> intre <mx:LineChart> si </mx:LineChart>:

9. Se adauga elemente informative pe liniile graficului. Acestea devin vizibile cand cursorul se va intersecta cu liniile graficului. Se modifica elementul <mx:LineChart> astfel:

10. Se poate modifica culoarea unei linii din grafic, prin intermediul unui element de tipul <mx:lineStroke> astfel:

11. Graficul este testat prin comanda Run Application din toolbar-ul aplicatiei (Run –> Run LineChartExample in meniu sau CTRL + F11)

 

[kml_flashembed publishmethod=”static” fversion=”10.0.0″ useexpressinstall=”true” movie=”http://www.itcsolutions.eu/wp-content/uploads/2010/12/LineChartExample.swf” targetclass=”flashmovie” loop=”true”]

[/kml_flashembed]

Sursa acestui exemplu poate fi descarcata prin Exemplu Line Chart  – sursa MXML.