Dokumen ini memberikan instruksi untuk mengimplementasikan Highcharts, yaitu library JavaScript untuk membuat berbagai jenis chart interaktif, dengan cara mengakses contoh chart dari Highcharts.com, menyimpan script dan CSS lokal, lalu menyisipkan script tersebut ke template coding.

2. CHARTJS

3. CHARTJS

4. FLOT CHARTS

5. HIGHCHART
Buka https://www.highcharts.com/
Klik salah satu Chart
Klik Demo Button

6. HIGHCHART
- Klik EDIT IN JSFIDDLE

7. HIGHCHART – EDIT IN JSFIDDLE
Copy coding didalamnya dan pasang dicoding template yang kita gunakan

8. HIGHCHARTS
- Agar script JS nya dapat diakses offline maka simpan script JS nya ke
folder assets atau folder yang kita buat sendiri
1 2

9. SIMPAN SCRIPT KE LOKAL
Simpan file .js
1. Buka link script .js, simpan file .js ke folder lokal
2. Buat script akses ke .js lokal
Simpan file .css
1. Copy script css, simpan ke file .css ke folder lokal
2. Buat script akses ke .css lokal
3. <link rel="stylesheet" href="dist/css/highcharts.css">

10. COPY SCRIPT KE FILE TEMPLATE
- Copy script ke file template
- Ganti judul chart dari container dengan nama tema chart (ex.
testhighcharts)

11. COPY SCRIPT KE FILE TEMPLATE
- Arahkan div id ke nama chart yang sudah dibuat (ex. Testhighcharts)

12. IMPLEMENTASI HIGHCHARTS

13. IMPLEMENTASI HIGHCHARTS

14. IMPLEMENTASI HIGHCHARTS

15. TERIMAKASIH