Scribd Logo
Unggah

Selamat datang di Scribd!

  • Membuat Grafik Data Dinamis Menggunakan PHP Dan Chart

    Diunggah oleh

    Mamas Pras
    230 tayangan3 halaman

    Judul Asli

    Membuat Grafik Data Dinamis menggunakan PHP dan Chart.docx

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    230 tayangan3 halaman

    Membuat Grafik Data Dinamis Menggunakan PHP Dan Chart

    Diunggah oleh

    Mamas Pras

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 3

    Membuat Grafik Data Dinamis menggunakan

    PHP dan Chart.js


    by Feri Mispandi | Apr 28, 2018 | Design, HTML, PHP MySQL, Uncategorized | 0 comments
    Hallo sahabat dumenity berjumpa lagi dalam tutorial kursuswebdesign, pada tutorial kali ini
    saya akan membahas tentang Membuat Grafik Data Dinamis menggunakan PHP dan
    Chart.js. Jika kita ingin memvisualisasikan statistik, grafik adalah salah satu cara terbaik untuk
    representasi. Memahami data menjadi mudah dan jelas dengan penggunaan grafik. Ada
    berbagai pustaka grafik seperti Google Charts, Highchart, Chart.js, dan banyak lagi. Pada artikel
    kali ini saya akan membuat contoh untuk membuat tampilan grafik dengan menggunakan
    pustaka Chart.js.
    Membuat tampilan grafik menggunakan Chart.js sederhana dan mudah. Saya telah membuat
    output grafik untuk data dinamis yang diambil dari database. Saya memiliki tabel database
    MySQL tbl_marks yang berisi tanda siswa. Saya membaca data mark dan memasukkannya ke
    fungsi Chart.js untuk membuat grafik dengan statistik tanda.
    Kanvas Bagan HTML5
    Unduh library Chartjs dari GitHub dan sertakan file pustaka dalam contoh Anda jika ingin
    mengikuti pembuatannya. Di halaman HTML, saya memiliki elemen kanvas HTML5 untuk
    memplot output grafik. Saat memuat halaman landing, saya mengirim permintaan AJAX ke PHP
    untuk membaca nilai siswa dari database. Respons JSON ini akan diuraikan dan disediakan
    sebagai parameter ke fungsi Chart.js untuk membuat grafik.

    1 <!DOCTYPE html>
    2 <html>
    3 <head>
    4 <title>Creating Dynamic Data Graph using PHP and Chart.js</title>
    5 <style type="text/css">
    6 BODY {
    7 width: 550PX;
    8 }
    9
    10 #chart-container {
    11 width: 100%;
    12 height: auto;
    13 }
    14 </style>
    15 <script type="text/javascript" src="js/jquery.min.js"></script>
    16 <script type="text/javascript" src="js/Chart.min.js"></script>
    17
    18
    19 </head>
    20 <body>
    21 <div id="chart-container">
    22 <canvas id="graphCanvas"></canvas>
    23 </div>
    24
    25 <script>
    26 $(document).ready(function () {
    27 showGraph();
    28 });
    29
    30
    31 function showGraph()
    32 {
    33 {
    34 $.post("data.php",
    35 function (data)
    36 {
    37 console.log(data);
    38 var name = [];
    39 var marks = [];
    40
    41 for (var i in data) {
    42 name.push(data[i].student_name);
    43 marks.push(data[i].marks);
    44 }
    45
    46 var chartdata = {
    47 labels: name,
    48 datasets: [
    49 {
    50 label: 'Student Marks',
    51 backgroundColor: '#49e2ff',
    52 borderColor: '#46d5f1',
    53 hoverBackgroundColor: '#CCCCCC',
    54 hoverBorderColor: '#666666',
    55 data: marks
    56 }
    57 ]
    58 };
    59
    60 var graphTarget = $("#graphCanvas");
    61
    62 var barGraph = new Chart(graphTarget, {
    63 type: 'bar',
    64 data: chartdata
    65 });
    66 });
    67 }
    68 }
    69 </script>
    70
    71 </body>
    72 </html>

    Kode PHP untuk Membaca Tanda Siswa dari Database MySQL


    File data PHP.php diminta melalui AJAX untuk mengakses database untuk membaca tanda
    siswa. Setelah membaca catatan, ia mengembalikannya sebagai respons JSON.berikut ini
    scriptnya,

    1 <?php
    2 header('Content-Type: application/json');
    3
    4 require_once('db.php');
    5
    6 $sqlQuery = "SELECT student_id,student_name,marks FROM tbl_marks ORDER BY student_id";
    7
    8 $result = mysqli_query($conn,$sqlQuery);
    9
    10 $data = array();
    11 foreach ($result as $row) {
    12 $data[] = $row;
    13 }
    14
    15 mysqli_close($conn);
    16
    17 echo json_encode($data);
    18 ?>

    Grafik Grafik Data Dinamis .js


    Screenshot ini menunjukkan output grafik yang dihasilkan oleh pustaka chart.js charting dengan
    data dinamis dari database.

    Oke itulah tadi pembahasan saya tentang Membuat Grafik Data Dinamis menggunakan PHP
    dan Chart.js semoga bermanfaat.

    Anda mungkin juga menyukai