Membuat Grafik Line berbasis web dengan Library Highchart

Hari Aspriyono

Diperbarui: 05 Nov, 2023 • • menit membaca

Daftar Isi

Membuat Grafik Line berbasis web dengan Library Highchart

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.

Pada tutorial kali ini saya akan mencontohkan pembuatan grafik dalam tipe line. Sebelumnya silahkan download library highchart DI SINI.

Setelah anda download library highchart, silahkan extrack file dan copykan folder "js" ke dalam root folder aplikasi web anda, contoh kali ini, root folder aplikasi saya adalah "grafik", dan saya letakkan folder "js" pada folder "grafik/assets/highchart/"

Download library jQuery DI SINI. Simpan file jQuery pada folder root anda, saya menyimpannya pada folder "grafik/assets/"

Jika sudah siap sekarang kita buat file html dengan nama grafik_line.html, dan ketik kode berikut:

<!DOCTYPE html>
<html>
<head>
<title>Grafik dengan Highchart</title>
<script src="./assets/jquery-2.1.4.min.js"></script>
<script src="./assets/highchart/js/highcharts.js"></script>
<!-- script option grafik line -->
<script type="text/javascript">
$(function () {
    $('#grafikline').highcharts({
        title: {
            text: 'Contoh Grafik Persentase Masyarakat Miskin Provinsi Bengkulu',
            x: -20 //center
        },
        subtitle: {
            text: 'Tahun 2010 - 2013',
            x: -20
        },
  credits: {
   enabled: false
  },
        xAxis: {
   title: {
                text: 'Tahun'
            },
            categories: ['2010','2011','2012','2013']
        },
        yAxis: {
            title: {
                text: 'Persentase (%)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '%'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
     name: "Bengkulu Selatan",
     data: [22.65,23.04,22.57,22.59]
    },{
     name: "Bengkulu Tengah",
     data: [7.27,6.55,6.46,6.38]
    },{
     name: "Bengkulu Utara",
     data: [14.57,14.48,14.29,14.80]
    },{
     name: "Kaur",
     data: [23.33,22.73,22.31,21.14]
    },{
     name: "Kepahyang",
     data: [16.17,15.38,15.06,14.76]
    },{
     name: "Kota Bengkulu",
     data: [21.65,22.24,22.01,17.68]
    },{
     name: "Lebong",
     data: [12.95,12.53,12.40,12.75]
    },{
     name: "Mukomuko",
     data: [13.06,13.29,13.15,14.12]
    },{
     name: "Rejang Lebong",
     data: [18.51,17.33,16.92,15.07]
    },{
     name: "Seluma",
     data: [21.91,21.26,20.91,20.74]
    }]
    });
});
</script>
</head>
<body>
<div id="grafikline" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>

Dari script di atas, menghasilkan tampilan grafik tipe line/garis seperti gambar berikut:

Dalam tutorial ini data grafik di masukkan manual pada script Javascript, sehingga script terlihat lebih panjang. Tutorial berikutnya akan membahas bagaimana membuat grafik dengan highchart, dan datanya diambil dari database MySQL menggunakan PHP.

Mudah-mudahan bermanfaat....