Menggunakan fungsi isStacked:true Pada Google Chart

Selamat siang teman-teman semua, kali ini kami akan share bagaimana cara Menggunakan fungsi isStacked:true Pada Gogole Chart. Kami baru sadar ada kode yang sangat bagus di gunakan dan yang terpenting mempunyai fungsi yang luar biasa yang mempunya google chart yang kalian buat akan lebih bagus dan terlihat elegan dengan hanya menggunakan fungsi yang sangat pendek.


isStacked:true berfungsi  menampilkan nilai masing-masing bar dan kemudian nilai total dari semua bar dalam diagram batang bertumpuk, dan kami baru mencoba itu dan ternyata chart yang kami buat terlihat elegan dan bagus sekali. Anda bisa melihat hasilnya pada gambar di atas.

Lalu pertanyaannya bagaimana menggunakan fungsi di atas dan abgaimana cara menempatkannya di dalam kodew google chart, Mari lihat dibawah ini.

 var options = {
        isStacked:true,
        chart: {
          title: 'The Chart Complaint',
          subtitle: 'Sales, Expenses, and Profit: 2014-2017',
        }, 

Itu adalah cara menggunakannya, dengan hanya menempatkan kode sependek itu kalian sdh mendapatkan chart yang bagus.

Tetapi jika teman-temna belum terlalu paham dengan penggunaan fungsinya mari lihat contoh form yang telah kami buat beserta google chartnya.

 
        vAxis: {format: 'decimal'},  
        height: 400,
        colors: ['#1b9e77', '#871B47', '#7570b3', '#999999'],     
      };


        //create trigger to resizeEnd event     
        $(window).resize(function() {
          if(this.resizeTO) clearTimeout(this.resizeTO);
          this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
          }, 500);
        });

        //redraw graph when window resize is completed  
        $(window).on('resizeEnd', function() {
          drawChart(data);
        });

        //css 
        options.chartArea = { left: '10%', top: '5%', width: "85%", height: "80%" };

        //create trigger to resizeEnd event     
        $(window).resize(function() {
          if(this.resizeTO) clearTimeout(this.resizeTO);
          this.resizeTO = setTimeout(function() {
            $(this).trigger('resizeEnd');
          }, 500);
        });

        //redraw graph when window resize is completed  
        $(window).on('resizeEnd', function() {
          drawChart(data);
        });
        //end


        var chart = new google.charts.Bar(document.getElementById('chart_div'));
        chart.draw(data, google.charts.Bar.convertOptions(options));
        var btns = document.getElementById('btn-group');
        btns.onclick = function (e) {
          if (e.target.tagName === 'BUTTON') {
            options.vAxis.format = e.target.id === 'none' ? '' : e.target.id;
            chart.draw(data, google.charts.Bar.convertOptions(options));
          }
    }
}
</script>
</head>
<body>
  <br /><br />
  <div class="container">
   <nav class="navbar navbar-inverse">
    <div class="container-fluid">
     <div class="navbar-header">
      <a class="navbar-brand" href="#">Google Chart</a>
    </div>
  </div>
</nav>
<br />
<br />
<div id="chart_div"></div>
<br/>
</div>
</body>
</html> 

Sekian share singkat, jika teman-teman belum paham silahkan mencoba contoh yang telah kami share di atas, dan jika belum juga silahkan tinggalkan komentar dibawah dan mulai berdiskusi dengan kami.


close