TUTORIAL

Highcharts

Tutorial Cara Membuat Grafik Laporan Realisasi Fisik dan Keuangan Dinamis Menggunakan PHP Native, JQuery, AJAX, dan Library Highcharts

25-07-2020 20:25:20 BY Alfikri Read 1057x 9 min read

Halo Klinik Coders...

Ditutorial ini kita akan mempelajari cara membuat grafik laporan realisasi fisik dan keuangan menggunakan PHP Native, JQuery, AJAX, dan Library Highcharts.

Tahap#1 - Persiapan

Ditahap ini kita menggunakan 2 buah library yaitu :
1. JQuery
2. Highcharts

Tahap#2 - Buat database dan table

Buatah sebuah database dan table sebagai berikut :

CREATE DATABASE IF NOT EXISTS `laporan` DEFAULT CHARSET=utf8mb4 COLLATE utf8mb4_general_ci;

CREATE TABLE `grafik` (
  `id_grafik` int(255NOT NULL,
  `bulan` int(2) DEFAULT NULL,
  `target_fisik` double(11,2) DEFAULT NULL,
  `target_keuangan` double(11,2) DEFAULT NULL,
  `realisasi_fisik` double(11,2) DEFAULT NULL,
  `realisasi_keuangan` double(11,2) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `grafik`
  ADD PRIMARY KEY (`id_grafik`);

ALTER TABLE `grafik`
  MODIFY `id_grafik` int(255NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=25;
COMMIT;


Tahap#3 - Buat file koneksi.php

Buatlah sebuah file koneksi.php untuk menghubungkan kedatabase


$mysqli = new mysqli("localhost""root""""laporan");

if ($mysqli->connect_errno) {
  echo "Failed to connect to MySQL: " . $mysqli->connect_error;
  exit();
}


Tahap#4 - Buat file data.php

Buatlah sebuah file data.php yang berfungsi untuk membuat dummy data grafik dan pemanggilan data dinamis

require 'koneksi.php';
// Kosongkan table gafik
$mysqli->query("TRUNCATE TABLE grafik");

// Data dummy grafik
for ($i = 1$i <= 12$i++) {
  $nilai = rand(3080);
  if ($i == 1) {
    $nilai = 0;
  } elseif ($i == 12) {
    $nilai = 100;
  }
  $insert = $mysqli->query("INSERT INTO grafik SET bulan = {$i}, target_fisik = ($nilai*6/10), target_keuangan = " . ($nilai * 4 / 5. ", realisasi_fisik=" . ($nilai * 6 / 11. ",realisasi_keuangan=" . $nilai);
}

$sql    = $mysqli->query("SELECT * FROM grafik");
$output = [];
while ($data = $sql->fetch_array(MYSQLI_ASSOC)) {
  $output['fisik'][]  = (float$data['target_fisik'];
  $output['keu'][]    = (float$data['target_keuangan'];
  $output['r_fis'][]  = (float$data['realisasi_fisik'];
  $output['r_keu'][]  = (float$data['realisasi_keuangan'];
}

echo json_encode($output);


Tahap#5 - Buat file index.php

Buatlah file index.php yang berfungsi untuk proses pemanggilan data menggunakan JQuery dan AJAX. Untuk hasil response AJAX kita render dalam bentuk grafik

DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
head>

<body>
  <div id="grafik_garis">div>
  <div id="grafik_batang">div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous">script>
  <script src="https://code.highcharts.com/highcharts.src.js">script>
  <script>
    $(document).ready(function() {
      chart_grafik_garis = new Highcharts.chart('grafik_garis', {
        chart: {
          type: 'line',
          events: {
            load: requestDataGaris
          }
        },
        title: {
          text: ''
        },
        subtitle: {
          text: 'Grafik Realisasi Fisik dan Keuangan Versi Garis'
        },
        xAxis: {
          categories: ['Jan''Feb''Mar''Apr''May''Jun''Jul''Aug''Sep''Oct''Nov''Dec'],
          gridLineWidth: 1
        },
        yAxis: {
          title: {
            text: 'Persentase (%)'
          },
          min: 0,
          max: 100,
          tickInterval: 10,
        },
        plotOptions: {
          line: {
            dataLabels: {
              enabled: true
            },
            enableMouseTracking: true
          },
        },
      });

      chart_grafik_batang = new Highcharts.chart('grafik_batang', {
        chart: {
          type: 'column',
          events: {
            load: requestDataBatang
          }
        },
        title: {
          text: ''
        },
        subtitle: {
          text: 'Grafik Realisasi Fisik dan Keuangan Versi Batang'
        },
        xAxis: {
          categories: ['Jan''Feb''Mar''Apr''May''Jun''Jul''Aug''Sep''Oct''Nov''Dec'],
          gridLineWidth: 1
        },
        yAxis: {
          title: {
            text: 'Persentase (%)'
          },
          min: 0,
          max: 100,
          tickInterval: 10,
        },
        plotOptions: {
          line: {
            dataLabels: {
              enabled: true
            },
            enableMouseTracking: true
          },
        },
      });
    });

    function requestDataGaris() {
      var rf = [];
      var rk = [];
      var ba = 7;
      $.ajax({
        url: 'data.php',
        type: "GET",
        dataType: "json",
        success: function(data) {
          chart_grafik_garis.addSeries({
            name: "Target Fisik",
            data: data.fisik
          });
          chart_grafik_garis.addSeries({
            name: "Realisasi Fisik",
            data: data.r_fis
          });
          chart_grafik_garis.addSeries({
            name: "Target Keuangan",
            data: data.keu
          });
          chart_grafik_garis.addSeries({
            name: "Realisasi Keuangan",
            data: data.r_keu
          });
        },
        cache: false
      });
    }

    function requestDataBatang() {
      var rf = [];
      var rk = [];
      var ba = 7;
      $.ajax({
        url: 'data.php',
        type: "GET",
        dataType: "json",
        success: function(data) {
          chart_grafik_batang.addSeries({
            name: "Target Fisik",
            data: data.fisik
          });
          chart_grafik_batang.addSeries({
            name: "Realisasi Fisik",
            data: data.r_fis
          });
          chart_grafik_batang.addSeries({
            name: "Target Keuangan",
            data: data.keu
          });
          chart_grafik_batang.addSeries({
            name: "Realisasi Keuangan",
            data: data.r_keu
          });
        },
        cache: false
      });
    }
  script>
body>

html>


Tahap#6 - Eksekusi

Jika langkah-langkah diatas dilakukan dengan benar maka akan tampil seperti gambar berikut ini :

Demikianlah tutorial ini saya buat, semoga bermanfaat dan bisa diterapkan kedalam project teman-teman. Jika ada pertanyaan silahkan komentar dibawah ini.
Let's Coding...


About author

Alfikri

Saya seorang web developer. Saya sangat suka tantangan untuk mempelejari hal-hal baru dalam dunia pemograman.



Comments

Scroll to Top