• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Jaranguda

Belajar Mengajar

  • Home
  • Sponsor/Jasa
  • Tentang

Membuat Grafik Bar Horizontal dan Vertikal dengan Chartist PHP MySQL

Last Updated on 7 February 2020 By tommy 2 Comments

Tampilan chart kali ini kita akan menggunakan data penjualan mobil terlaris 2019 dari gaikindo. chartist tidak memiliki dependency sehingga bisa digunakan standalone. Karena ukurannya yang kecil, sangat cocok digunakan dimana-mana.

Import data mysql berikut ini kedalam database anda.

CREATE TABLE `penjualanmobil` (
  `id` INT(11) NOT NULL,
  `jenismobil` VARCHAR(50) NOT NULL,
  `jumlah` INT(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
INSERT INTO `penjualanmobil` (`id`, `jenismobil`, `jumlah`) VALUES
(1, 'Toyota Avanza', 7848),
(2, 'Toyota Rush', 6136),
(3, 'Mitsubishi Xpander', 5775),
(4, 'Honda Brio Satya', 5655),
(5, 'Toyota Calya', 5167);
 
-- Indexes for table `penjualanmobil`
--
ALTER TABLE `penjualanmobil`
  ADD PRIMARY KEY (`id`);

Buat file chartist.php di root folder web server anda. Yang perlu diganti adalah

$DB_SERVER = “”;
$DB_USER = “”;
$DB_PASSWORD = “”;
$DB_NAME = “”;

sesuaikan dengan credential dari database.

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
  <title>Membuat Grafik / Chart dari Database dengan PHP MySQLi ChartJS</title>
  </head>
  <body>
    <div class="ct-chart ct-double-octave"></div>
    <?php
 
      $DB_SERVER = "localhost";
      $DB_USER = "root";
      $DB_PASSWORD = "xeiX3wia9lie7Uz";
      $DB_NAME = "tutorial";
      $mysqli = new mysqli("$DB_SERVER","$DB_USER","$DB_PASSWORD","$DB_NAME");
 
      if ($mysqli->connect_errno) {
          echo "Errno: " . $mysqli->connect_errno . "\n";
          echo "Error: " . $mysqli->connect_error . "\n";
          exit;
      }
      $query = "select jenismobil,jumlah from penjualanmobil";
      $result = $mysqli->query($query);
      $data = [];
      while ($output = $result->fetch_assoc()) {
          $data['jenismobil'][] = $output['jenismobil'];
          $data['jumlah'][] = $output['jumlah'];
      }
 
    ?>
 
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script type="text/javascript">
    var jumlah = [ <?php foreach($data['jumlah'] as $jumlah) { echo "'$jumlah',"; } ?> ];
    var jenismobil = [ <?php foreach($data['jenismobil'] as $jenismobil) { echo "'$jenismobil',"; } ?> ];
    new Chartist.Bar('.ct-chart', {
      labels: jenismobil,
      series: [jumlah],
    });
    </script>
  </body>
</html>

Tampilan script diatas di browser
penjualan mobil gakindo 2019

grafik diatas berbentuk vertikal, untuk merubahnya menjadi horizontal ubah scriptnya menjadi

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.css">
  <title>Membuat Grafik / Chart dari Database dengan PHP MySQLi ChartJS</title>
  </head>
  <body>
    <div class="ct-chart ct-double-octave"></div>
    <?php
 
      $DB_SERVER = "localhost";
      $DB_USER = "root";
      $DB_PASSWORD = "xeiX3wia9lie7Uz";
      $DB_NAME = "tutorial";
      $mysqli = new mysqli("$DB_SERVER","$DB_USER","$DB_PASSWORD","$DB_NAME");
 
      if ($mysqli->connect_errno) {
          echo "Errno: " . $mysqli->connect_errno . "\n";
          echo "Error: " . $mysqli->connect_error . "\n";
          exit;
      }
      $query = "select jenismobil,jumlah from penjualanmobil";
      $result = $mysqli->query($query);
      $data = [];
      while ($output = $result->fetch_assoc()) {
          $data['jenismobil'][] = $output['jenismobil'];
          $data['jumlah'][] = $output['jumlah'];
      }
 
    ?>
 
    <script src="//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
    <script type="text/javascript">
    var jumlah = [ <?php foreach($data['jumlah'] as $jumlah) { echo "'$jumlah',"; } ?> ];
    var jenismobil = [ <?php foreach($data['jenismobil'] as $jenismobil) { echo "'$jenismobil',"; } ?> ];
    new Chartist.Bar('.ct-chart', {
      labels: jenismobil,
      series: [jumlah],
    }, {
      horizontalBars: true,
    });
    </script>
  </body>
</html>

Tampilan grafik horizontal
horizontal chart php

Tulisan menarik lainnya

  • Membuat Diagram Batang (Pie Chart) dengan PHP MySQL

    Sebagai contoh kita akan membuat diagram batang data penduduk Indonesia per provinsi. Buat sebuah database…

  • Membuat Kalender dengan PHP

    Buat sebuah file dengan nama kalender.php lalu tambahkan script dibawah ini Minggu Senin Selasa Rabu…

  • Membuat Script Login dengan PHP dan MySQL

    Update 13 Feb 2014 PHP + MySQLi bisa dilihat di Membuat Script Login Sederhana dengan…

  • Tutorial Koneksi PHP dengan MySQL

    Dibawah ini akan dijelaskan mengenai cara untuk mengkoneksikan PHP ke database MySQL. Tulis script dibawah…

Filed Under: dll

Reader Interactions

Comments

  1. Dhani Trianggara says

    5 November 2020 at 11:14

    Gan kalau Chartis.js Digunakan di dalam Codeigniter Bagaimana ya ?

    Reply
    • tommy says

      5 November 2020 at 12:03

      bisa dilihat di https://jaranguda.com/membuat-diagram-dengan-chartjs-di-codeigniter-3/

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

Pencarian

Tanya Jawab tentang DevOps SRE CPE, gabung di https://t.me/devopsindonesia

Terbaru

  • Solusi AWS CLI SSL VALIDATION failed
  • Monitoring Kubernetes Cluster dengan Prometheus
  • Solusi Playwright Firefox version `GLIBCXX_3.4.30′ not found (required by /lib64/libicuuc.so.69)
  • Cara Upgrade Fedora 35 ke Fedora 36
  • Ekstrak Gzip File dan Ambil Total dengan Python

Komentar

  • Xpud on Script PHP untuk Mengambil History Lagu Shoutcast v2.5
  • Jrenx on Membuat Bot Telegram Sederhana dengan PHP
  • Sella on Kemana Menghilangnya Saldo BCA 50 ribu
  • Rian on Mengganti Halaman Error Laravel
  • Suchie on Kemana Menghilangnya Saldo BCA 50 ribu

Tulisan Populer

  • Password Router Huawei HG8245H5 Indihome 1m views
  • Password Terbaru ZTE F609 Indihome 781.6k views
  • Password Superadmin Huawei HG8245A 295k views
  • Cara Setting Manual Modem GPON ZTE F609 Indihome 268k views
  • Cara Setting Wireless ZTE F609 Indihome 251.2k views
  • Mengaktifkan Port LAN di Huawei HG8245 Indihome 165.5k views
  • Akses UseeTV Indihome via Wireless ZTE F609 154.8k views
  • Cara Reset Password ZTE F609 Indihome 146k views
  • Kemana Menghilangnya Saldo BCA 50 ribu 136.5k views
  • Cara Setting DHCP Server Modem/Router ZTE F609 109.1k views

Kategori

  • Delphi
  • dll
  • Gambas
  • Internet
  • Java
  • Lazarus
  • Linux
  • PHP
  • Review
  • Teknologi

Sponsor

kadal.id
Untuk jadi sponsor, hubungi kita lewat halaman sponsor
© 2021. Jaranguda
  • Linux
  • PHP
  • Internet
  • Teknologi
  • Delphi
  • Gambas
  • Java