Home » , » Belajar grafik dengan Highchart

Belajar grafik dengan Highchart

Written By SBlog on Monday, September 7, 2015 | September 07, 2015

Highcharts adalah sebuah Interaktive Javascript charts yang dibuat oleh Highsoft untuk membuat grafik dengan javascript, Amerika. Untuk membuat grafik /chart dengan highcharts memerlukan javascript library berupa jQuery atau mootools. Untuk membuat grafik di HTML menggunakan highchart tidaklah sulit.
1. Download file jQuery dan package Highchart, setelah itu ekstrak.
2. Copy folder "js" hasil ekstrak-an  package Highchart, kemudian paste ke direktori tempat kerja sobat, Jangan lupa copy-paste juga file jQuery yang tadi di download ke folder "js". Folder "js" inilah tempat kita meletakkan semua file javascript (*.js). Untuk memanggil file tersebut memasukan script dibawah ini ke dalam program:

<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<!-- jika ingin menggunakan theme file -->
<script type="text/javascript" src="js/themes/dark-blue.js"></script>
<!-- jika inggin menggunakan exporting module -->
<script type="text/javascript" src="js/modules/exporting.js"></script>

3. Langkah selanjutnya ketik secript sebagai berikut yang berisi data grafik yangakan dibuat:
<script type="text/javascript">
   var chart;
   $(document).ready(function() {
    chart = new Highcharts.Chart({
     chart: {
      renderTo: 'container',
      defaultSeriesType: 'column'
     },
     title: {
      text: 'Hasil Penjualan Buku'
     },
     subtitle: {
      text: 'http://sukabangetteknologi.blogspot.com/'
     },
     xAxis: {
      categories: [
       'Jan',
       'Feb',
       'Mar',
       'Apr',
       'May',
       'Jun',
       'Jul',
       'Aug',
       'Sep',
       'Oct',
       'Nov',
       'Dec'
      ]
     },
     yAxis: {
      min: 0,
      title: {
       text: 'Jumlah'
      }
     },
     legend: {
      layout: 'vertical',
      backgroundColor: '#FFFFFF',
      align: 'left',
      verticalAlign: 'top',
      x: 100,
      y: 70,
      floating: true,
      shadow: true
     },
     tooltip: {
      formatter: function() {
       return ''+
        this.x +': '+ this.y +' pcs';
      }
     },
     plotOptions: {
      column: {
       pointPadding: 0.2,
       borderWidth: 0
      }
     },
            series: [{
      name: 'SD',
      data: [499, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544]
 
     }, {
      name: 'SLTP',
      data: [836, 788, 985, 934, 1060, 845, 1050, 1043, 912, 835, 1066, 923]
 
     }, {
      name: 'SMA',
      data: [489, 388, 393, 414, 470, 483, 590, 596, 524, 652, 593, 512]
 
     }, {
      name: 'SMK',
      data: [424, 332, 345, 397, 526, 755, 574, 604, 476, 391, 468, 511]
 
     }]
    });      
   });  
  </script>

4. Untuk menampilkan hasilnya, masukkan script berikut di dalam tag <body></body> :
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

5. Script lengkapnya berikut ini:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
 <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
 <meta name="author" content="suisbiaq@gmail.com" />

 <title>grafik_penjualan_buku</title>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<!-- jika ingin menggunakan theme file -->
<script type="text/javascript" src="js/themes/dark-blue.js"></script>
<!-- jika inggin menggunakan exporting module -->
<script type="text/javascript" src="js/modules/exporting.js"></script>

<script type="text/javascript">

   var chart;
   $(document).ready(function() {
    chart = new Highcharts.Chart({
     chart: {
      renderTo: 'container',
      defaultSeriesType: 'column'
     },
     title: {
      text: 'Hasil Penjualan Buku'
     },
     subtitle: {
      text: 'http://sukabangetteknologi.blogspot.com/'
     },
     xAxis: {
      categories: [
       'Jan',
       'Feb',
       'Mar',
       'Apr',
       'May',
       'Jun',
       'Jul',
       'Aug',
       'Sep',
       'Oct',
       'Nov',
       'Dec'
      ]
     },
     yAxis: {
      min: 0,
      title: {
       text: 'Jumlah'
      }
     },
     legend: {
      layout: 'vertical',
      backgroundColor: '#FFFFFF',
      align: 'left',
      verticalAlign: 'top',
      x: 100,
      y: 70,
      floating: true,
      shadow: true
     },
     tooltip: {
      formatter: function() {
       return ''+
        this.x +': '+ this.y +' pcs';
      }
     },
     plotOptions: {
      column: {
       pointPadding: 0.2,
       borderWidth: 0
      }
     },
            series: [{
      name: 'SD',
      data: [499, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544]
 
     }, {
      name: 'SLTP',
      data: [836, 788, 985, 934, 1060, 845, 1050, 1043, 912, 835, 1066, 923]
 
     }, {
      name: 'SMA',
      data: [489, 388, 393, 414, 470, 483, 590, 596, 524, 652, 593, 512]
 
     }, {
      name: 'SMK',
      data: [424, 332, 345, 397, 526, 755, 574, 604, 476, 391, 468, 511]
 
     }]
    });
 
 
   });
 
  </script>

</head>

<body>

<!-- 3. Add the container -->
  <div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>

</body>
</html>

note: untuk script berikut ini memanggil file javascript "dark-blue.js" yang merupakan themes untuk tampilan highcharts,
<script type="text/javascript" src="js/themes/dark-blue.js"></script>

Hasil Chart sebagai berikut:

defaultSeriesType: 'column'

Untuk membuat grafik tipe line/garis tinggal mengganti :
defaultSeriesType: 'column' menjadi  'line'
hasilnya seperti berikut ini.

defaultSeriesType: 'line'

Labels: ,

0 comments:

Post a Comment

(^_^) [o_o] (^.^) (".") ($.$)