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.
Witam czy udalo sie Panu umiescic 2 wykresy na jednej stronie? Jak tak to jak bo nie moge tego rozgrysc
Szczerze mówiąc nie próbowałem tego, więc nie wiem czy takie rozwiązanie jest możliwe.
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
Pingback: piotrsajnog.pl: Jak wstawić wykres amCharts na stronę? | Piotr Sajnog | flaker.pl
Witam,
Szukając rozwiązania problemu wstawienia kilku wykresów trafia się zwykle na tego bloga. W ramach dobrego uczynku podaję rozwiązanie następującego problemu:
http://www.amcharts.com/docs/v.1/bundle/basics/mu…
Przydałoby mi się to w pracy, ale że nie działa na blogu to kiepsko, bo serwis stoi na WP…