Tutorial Membuat Grafik Menggunakan Highcharts

Tutorial Highcharts
Pada kesempatan kali ini boelshare akan mencoba membuat grafik (chart) menggunakan javascript (Highcharts Js), seperti yang tampak pada gambar disamping. Sebenarnya banyak plugin javascript yang berguna untuk membuat grafik yang tersedia di internet, tapi kali ini kita akan mencoba membahas tentang Highcharts Js. 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. Berikut langkah-langkah cara membuat grafik / chart menggunakan javascript (Highcharts) :

Instalasi (Installation)
  1. Download JQuery dan Package Highcharts, Ekstrak file highcharts
  2. Copy folder "js" hasil ekstrak-an kemudian paste ke direktori tempat kerja sobat, Jangan lupa copy-paste juga file Jquery yang tadi di download ke folder "js", untuk memanggil file tersebut memasukan script dibawah ini:
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="js/highcharts.js" type="text/javascript"></script>
    <!-- 1a) Optional: add a theme file -->
    <script type="text/javascript" src="js/themes/dark-blue.js"></script>
    <!-- 1b) Optional: the exporting module -->
    <script type="text/javascript" src="js/modules/exporting.js"></script>
  3. Kemudian ketik secript sebagai berikut: 
    <script type="text/javascript">  
       var chart;
       $(document).ready(function() {
        chart = new Highcharts.Chart({
         chart: {
          renderTo: 'container',
          defaultSeriesType: 'column'
         },
         title: {
          text: 'Hasil Penjualan Motor'
         },
         subtitle: {
          text: 'http://boelshare.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 +' unit';
          }
         },
         plotOptions: {
          column: {
           pointPadding: 0.2,
           borderWidth: 0
          }
         },
                series: [{
          name: 'Jakarta',
          data: [499, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544]
        
         }, {
          name: 'Bekasi',
          data: [836, 788, 985, 934, 1060, 845, 1050, 1043, 912, 835, 1066, 923]
        
         }, {
          name: 'Bogor',
          data: [489, 388, 393, 414, 470, 483, 590, 596, 524, 652, 593, 512]
        
         }, {
          name: 'Bandung',
          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 sebagai berikut:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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="Imamfirmansyah" />
    
     <title>Untitled 1</title>
    <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
    <script type="text/javascript" src="js/highcharts.js"></script>
    <!-- 1a) Optional: add a theme file -->
    <script type="text/javascript" src="js/themes/dark-blue.js"></script>
    <!-- 1b) Optional: the 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 Motor'
         },
         subtitle: {
          text: 'http://boelshare.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 +' unit';
          }
         },
         plotOptions: {
          column: {
           pointPadding: 0.2,
           borderWidth: 0
          }
         },
                series: [{
          name: 'Jakarta',
          data: [499, 715, 1064, 1292, 1440, 1760, 1356, 1485, 2164, 1941, 956, 544]
        
         }, {
          name: 'Bekasi',
          data: [836, 788, 985, 934, 1060, 845, 1050, 1043, 912, 835, 1066, 923]
        
         }, {
          name: 'Bogor',
          data: [489, 388, 393, 414, 470, 483, 590, 596, 524, 652, 593, 512]
        
         }, {
          name: 'Bandung',
          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>
    

Penjelasan Lebih Lanjut:

  • Pada point ke-3 ini, kita memanggil file-file javascript yang dibutuhkan.
  • Pada script 
    <script type="text/javascript" src="js/themes/dark-blue.js"></script>
    merupakan themes untuk tampilan highcharts, ada 4 jenis themes yang disediakan highcharts. bisa disesuaikan sesuai selera.
Recomended for You | Rokemendasi untuk Anda :

0 comments on Tutorial Membuat Grafik Menggunakan Highcharts :

Post a Comment

Recent Comments

Free Page Rank Tool
alexa rank. boelshare
Free Auto Backlinks boelshare.blogspot.com
free search engine submission The American Directory TK Free Web Directory Bloggers - Meet Millions of Bloggers

free counters
Internet Blog DirectoryComputers Blogs
blog directory
eXTReMe Tracker
Software
Personal Blogs
Hot! Free Download Software Full Version W3 Directory - the World Wide Web Directory

free link

 

Selamat Datang! di Blog Boelshare.