Niedawno pisałem wam o serwisie amCharts.com, który umożliwia wstawienie na stronę internetową dynamicznych wykresów. Przez ostatnie kilka dni pobawiłem się trochę i dziś mogę wam przybliżyć jego działanie. Z tego wpisu dowiecie się jak, w łatwy sposób, stworzyć i wstawić na swoją stronę wykres korzystając z możliwości oferowanych przez amCharts.com.

Jako przykład posłużę się wykresem kołowym, na którym przedstawię wam przegląd źródeł odwiedzin bloga w maju.

Edycja wykresu

Jeśli chcemy w łatwy sposób wstawić wykres amCharts na swoją stronę to musimy przede wszystkim go stworzyć. W tym celu przechodzimy na stronę z edytorem wykresów, a następnie wybieramy pozycję Pie & Donut. Pracę z edytorem sugeruję zacząć od zakładki General settings po lewej stronie, gdzie możemy ustalić między innymi rodzaj, wielkość i kolor czcionki, kolory poszczególnych elementów wykresu, a także wielkość boksu z wykresem na stronie.

amCharts - zakładka "General settings"

Następnie możemy przejść od razu do zakładki Labels, gdzie możemy nadać wykresowi tytuł i ustalić miejsce jego wyświetlania względem boksu z wykresem.

amCharts - zakładka "Labels"

Kolejnym krokiem jest wprowadzenie danych do wykresu. Możemy to zrobić na przykład w zakładce XML data, gdzie każde wyrażenie:

<slice title="Nazwa wartości">wartość w liczbach</slice>

odpowiada pojedynczemu elementowi wykresu. Na ilustracji poniżej możecie zobaczyć jak zostało to ustalone dla mojego wykresu.

amCharts - zakładka "XML Data"

Wstawiamy wykres na stronę

Gdy już mamy gotowy wykres, możemy go wstawić na stronę. W tym celu przechodzimy do zakładki HTML i zaznaczamy wszystkie trzy opcje, które znajdują się na dole okna, czyli:

• include data
• include settings
• use swf files hosted in amcharts

a następnie zaznaczamy i kopiujemy cały tekst z kodem HTML znajdującym się w oknie edytora i wklejamy go w docelowe miejsce na stronie, w którym ma się pokazać wykres.

amCharts - zakładka "HTML"

Niestety we wpisie na blogu wklejony kod nie jest poprawnie interpretowany (zna ktoś sposób na rozwiązanie tego problemu?) dlatego, w celu zaprezentowania wam interaktywnego wykresu stworzyłem specjalną stronę demo. Tam wszystko działa jak należy.