Seperti yang sudah saya tulis pada postingan sebelumnya tentang membuat grafik line menggunakan highcharts, highcharts adalah library grafik yang ditulis dalam bahasa JavaScript murni. Highchart menawarkan cara mudah untuk menambahkan grafik yang interaktif ke dalam situs web atau aplikasi web. Highchart mendukung banyak format grafik atau tipe grafik diantaranya line, spline, area, areaspline, column, bar, pie, scatter, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall dan polar.
Grafik batang atau dalam highcharts disebut grafik column adalah grafik yang penyajian datanya mengunakan batang atau persegi panjang. Grafik batang atau sering kita kenal dengan sebutan histogram. Grafik batang dipakai untuk memperlihatkan perbedaan tingkat nilai dari beberapa aspek pada suatu data. Grafik batang merupakan grafik yang paling sederhana diantara jenis-jenis grafik lainnya. Karena grafik ini sangat mudah untuk dipahami dan hanya menggambarkan data dalam bentuk batang/column.
| Grafik Batang |
Baik untuk membuat grafik batang/column, ikuti langkah-demi langkah berikut ini:
Pertama [1] - Siapkan folder project anda, pada contoh ini saya akan membuat folder pada root folder web server "... /htdocs/lab/grafik".
| Folder Project Grafik |
Ketiga [3] - Extract file hasil download kemudian pindahkan folder code ke dalam folder grafik yang telah disiapkan pada langkah Pertama [1], lalu rename folder menjadi "highcharts".
| Persiapan Library Highcharts |
Keempat [4] - Buat file pada folder grafik dengan nama grafik_batang.html, kemudian siapkan struktur HTML seperti berikut ini:
Grafik Batang dengan Highcharts
Kelima [5] - Pada baris ke-8 , tambahkan script untuk memanggil library highcharts seperti script/kode di bawah ini.
Keenam [6] - Pada bagian Body tambahkan area div dengan id="grafik_batang" untuk menampilkan grafik. Ketikkan kode di bawah ini.
Ketujuh [7] - Tambahkan kode javascript di bawah ini untuk membuat grafik dan ditampilkan pada area grafik yang telah dibuat sebelumnya. Kode ini diletakkan di bawah "