Selasa, 01 Mei 2018

Cara Membuat Grafik Batang Menggunakan HTML

Cara Membuat Grafik Batang Menggunakan HTML

Cara Membuat Grafik Batang Menggunakan HTML
Cara Membuat Grafik Batang Menggunakan HTML
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.

Disana Gunung Disini Gunung, Ditengahnya Pulau Jawa
Kamu Bingung Infonya Nanggung, Mending Visit Blog Mang Otep Aja

Load comments