Cara Penggunaan Highcarts

Highcharts merupakan semacam framework javascript yang sangat baik digunakan untuk menampilkan gambar/grafik di website kita.
Anda bisa mengunduhnya di http://www.highcharts.com. Hasil downloadnya berupa file zip. Ekstraklah file zip tersebut, dan kita pun dalam sekejap akan mudah menggunakannya.

Hasil ekstrak terdiri atas beberapa folder. Untuk mempelajarinya, kita hanya perlu membuka-buka contohnya di folder examples. Untuk penggunaan sesungguhnya, kita hanya membutuhkan folder ‘js’.

Hal pertama yang perlu kita lakukan adalah menyisipkan kode link javascript pada kode HTML kita. Perlu diketahui, highcharts ini harus digunakan dengan bantuan framework javascript lainnya, seperti JQuery. Oleh karenanya, skrip-nya akan menjadi seperti berikut:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>

Jika ingin menambahkan modelnya, kita bisa memilih themanya di folder theme. Cukup tambahkan kode berikut di bawah skrip di atas.

<script type="text/javascript" src="js/themes/grid.js"></script>

Jika ingin menambahkan fungsionalitas ekspor grafik, tambahkan lagi kode berikut di bawahnya.

<script type="text/javascript" src="js/modules/exporting.js"></script>

Kedua, sisipkan kode javascript seperti berikut:

<script type="text/javascript">
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'area'
        },
        title: {
            text: 'US and USSR nuclear stockpiles'
        },
        subtitle: {
            text: 'Source: <a href="http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf">'+
                'thebulletin.metapress.com</a>'
        },
        xAxis: {
            labels: {
                formatter: function() {
                    return this.value; // clean, unformatted number for year
                }
            }
        },
        yAxis: {
            title: {
                text: 'Nuclear weapon states'
            },
            labels: {
                formatter: function() {
                    return this.value / 1000 +'k';
                }
            }
        },
        tooltip: {
            formatter: function() {
                return this.series.name +' produced <b>'+
                    Highcharts.numberFormat(this.y, 0) +'</b><br/>warheads in '+ this.x;
            }
        },
        plotOptions: {
            area: {
                pointStart: 1940,
                marker: {
                    enabled: false,
                    symbol: 'circle',
                    radius: 2,
                    states: {
                        hover: {
                            enabled: true
                        }
                    }
                }
            }
        },
        series: [{
            name: 'USA',
            data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,
                1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,
                27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,
                26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,
                24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,
                22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,
                10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]
        }, {
            name: 'USSR/Russia',
            data: [null, null, null, null, null, null, null , null , null ,null,
            5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,
            4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,
            15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,
            33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,
            35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,
            21000, 20000, 19000, 18000, 18000, 17000, 16000]
        }]
    });
});
</script>

Ketiga, untuk menampilkan grafik di atas, kita perlu menyediakan tempat dengan id yang bernama sesuai  properti renderTo pada javascript di atas, yaitu container.

<div id="container"></div>

Selamat mencoba!

Pos ini dipublikasikan di Developer. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s