Cara Membuat Grafik Batang Menggunakan HTML

Cara Membuat Grafik Batang Menggunakan HTML

Diposting pada

Blog Mang Otep | Cara Membuat Grafik Batang Menggunakan HTML – Dalam Pembuatan Grafik sendiri memang banyak macam nya contohnya seperti grafik garis, grafik batang, dan ada juga grafik lingkaran. Kali ini mamang akan membagikan Tutorial Sederhana bagaimana Cara Membuat Grafik Batang dengan menggunakan HTML. Sebelum ke tutorialnya mari kita ketahui dulu apa sih Grafik Batang itu ?

Grafik Batang atau biasa kita sebut juga dengan grafik Histogram ialah grafik yang dalam penyajian datanya menggunakan bentuk batang atau persegi panjang, Grafik batang memang bertujuan untuk menyampaikan data yang di dapat dalam penelitian yang berupa batang atau persegi panjang sehingga mudah untuk dicermati oleh para pembaca grafik tersebut.

Dalam penerapan untuk blogging grafik batang seringkali di tampilkan pada halaman suatu website profesional dalam menunjukkan data kumulatif tentang tautan mereka, ada juga yang menggunakan grafik sebagai tolak ukur polling pada setiap pengunjung demi kelancaran bisnis mereka. Berikut ini contoh simple kode HTML yang bisa anda gunakan dalam pembuatan grafik batang 

Cara Membuat Grafik Batang Menggunakan HTML :

Kode Javacript

Highcharts.chart('container', {
  data: {
    table: 'datatable'
  },
  chart: {
    type: 'column'
  },
  title: {
    text: 'Contoh Data Penggemar Mobile Legend VS Arena Of Valor'
  },
  yAxis: {
    allowDecimals: false,
    title: {
      text: 'Persentase'
    }
  },
  tooltip: {
    formatter: function () {
      return '' + this.series.name + '
' +
        this.point.y + ' ' + this.point.name.toLowerCase();
    }
  }
});

KODE HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<table id="datatable">
  <thead>
    <tr>
      <th></th>
      <th>Mobile Legend</th>
      <th>Arena Of Valor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Januari</th>
      <td>60</td>
      <td>40</td>
    </tr>
    <tr>
      <th>Februari</th>
      <td>40</td>
      <td>60</td>
    </tr>
    <tr>
      <th>Maret</th>
      <td>50</td>
      <td>50</td>
    </tr>
    <tr>
      <th>April</th>
      <td>49</td>
      <td>51</td>
    </tr>
    <tr>
      <th>Mei</th>
      <td>0</td>
      <td>0</td>
    </tr>
  </tbody>
</table>

Diatas adalah contoh sederhana bagaimana kalian dapat membuat grafik batang dengan menggunakan HTML, kode diatas bisa kita kombinasikan dengan penggunaan source submit secara otomatis yang bisa memberikan penilaian terhadap suatu yang akan di teliti atau ketahui.

Demikianlah info dari Blog Mang Otep mengenai artikel Cara Membuat Grafik Batang Menggunakan HTML, semoga bermanfaat untuk anda. Jika menyukai artikel ini kalian bisa klik like, share, and subscribe blog ini untuk mendapatkan pemberitahuan artikel terbaru melalui email pribadi anda.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *