Fungsi javascript apa yang digunakan untuk menghasilkan grafik batang

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:

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 "

"

Setelah ditambahkan script-script di atas, maka script lengkapnya seperti di bawah ini:

Kedelapan (8) - Jalankan file grafik_batang.html melalui browser, jika kode yang anda ketikkan benar maka hasilnya seperti terlihat pada gambar berikut ini;

Grafik Batang Berbasis Web

Seperti itulah kira-kira pembuatan grafik batang dengan highcharts. Mudah-mudahan bermanfaat.