amCharts

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"
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"
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"
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"
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.

6 thoughts on “Jak wstawić wykres amCharts na stronę?

  1. Witam czy udalo sie Panu umiescic 2 wykresy na jednej stronie? Jak tak to jak bo nie moge tego rozgrysc

      1. Na stronie amCharts.com maja po kilka wykresów a mi jakby flash nie chciał obsłużyć kilku zawsze wykonuje ostatni ładuje je przez require i zawsze wyświetla ostatni a wcześniejsze wywalają "You need to upgrade your Flash Player" no nic dzięki za szybką odpowiedz. ps ciekawa stronka
        Pozdrawiam Łukasz

  2. Przydałoby mi się to w pracy, ale że nie działa na blogu to kiepsko, bo serwis stoi na WP…

Komentarze zostały wyłączone.