Penanganan data ZingChart yang fleksibel memungkinkan Anda untuk menggunakan data secara langsung dari database. Dalam tutorial ini, kita akan membahas penggunaan PHP untuk mengkueri database MySQL dan mengonversi data menjadi variabel JavaScript untuk digunakan dalam bagan kita.
Menggunakan PHP dan MySQL adalah kasus penggunaan yang sangat umum, tetapi jika Anda menggunakan database yang berbeda, kami memiliki demo lain yang tersedia dan sedang dalam pengembangan. Jika Anda sedang mencari sesuatu yang lain, coba salah satu dari demo ini
- MongoDB
- CouchDB
- Firebase
- Node. js/MySQL
Sekarang, mari kita mulai dengan PHP dan MySQL
Untuk contoh ini, kami telah membuat database MySQL yang berisi beberapa contoh data dan kami ingin menampilkan data ini dalam bagan JS. Berikut adalah isi dari tabel t_test kami
mysql> select * from t_test; +------+--------+--------+ | f_id | f_name | f_data | +------+--------+--------+ | 1 | Webster| 24 | | 2 | Parnel | 68 | | 3 | Dena | 48 | | 4 | Tyrell | 70 | | 5 | Martha | 40 | | 6 | Summer | 15 | | 7 | Linton | 30 | +------+--------+--------+ 7 rows in set (0.00 sec)Pertama-tama kita harus membuka koneksi ke database
<?php /* Open connection to "zing_db" MySQL database. */ $mysqli = new mysqli("localhost", "user", "password", "zing_db"); /* Check the connection. */ if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); exit(); } ?>_Data kami ada dalam tabel t_test kami, jadi kami akan menanyakan database kami untuk menerima kumpulan hasil
<?php /* Open connection to "zing_db" MySQL database. */ $mysqli = new mysqli("localhost", "user", "password", "zing_db"); /* Check the connection. */ if (mysqli_connect_errno()) { printf("Connect failed: %s\n", mysqli_connect_error()); exit(); } /* Fetch result set from t_test table */ $data=mysqli_query($mysqli, "SELECT * FROM t_test"); ?>Untuk membuat data kompatibel dengan bagan kita, kita harus membuat objek JavaScript dari data tersebut. Untuk melakukan ini, kita akan menggunakan PHP while loop untuk mengulang melalui data kita untuk membuat larik JavaScript dari kumpulan hasil kita
<script> var myData=[<?php while($info=mysqli_fetch_array($data)) echo $info[ 'f_data' ].','; /* We use the concatenation operator '.' to add comma delimiters after each data value. */ ?>]; <?php $data=mysqli_query($mysqli, "SELECT * FROM t_test"); ?> var myLabels=[<?php while($info=mysqli_fetch_array($data)) echo '"'.$info[ 'f_name' ].'",'; /* The concatenation operator '.' is used here to create string values from our database names. */ ?>]; </script>Sekarang kita memiliki data database kita di objek array JavaScript kita, kita dapat menutup koneksi database
<?php /* Close the connection */ $mysqli->close(); ?>_Kita sekarang dapat menggunakan array myData dan myLabels seperti yang kita lakukan dengan objek array normal
window.addEventListener('load', function() { zingchart.render({ id: "myChart", width: "100%", height: 400, data: { type: 'bar', title: { text: "Data Pulled from MySQL Database" }, 'scale-x': { labels: myLabels }, series: [{ values: myData }] } }); };_Membuat kueri database dan menggunakan data yang diambil akan memungkinkan Anda untuk terus memperbarui bagan JS dengan data terbaru, menghilangkan kebutuhan untuk mengubah konfigurasi JSON bagan secara manual. Dalam contoh ini, kami menggunakan database MySQL, tetapi proses yang sama dapat diikuti dengan semua jenis database. Cobalah
Bagan yang digambar di atas dapat ditampilkan dengan koneksi internet langsung karena perpustakaan akan dimuat dari gstatic. com
Data dikumpulkan dari tabel database MySQL sehingga data dapat diedit dengan menggunakan skrip dan hal yang sama akan dicerminkan oleh Bagan. Kami belum memasukkan bagian ini dalam skrip ini dan ada banyak tutorial yang tersedia di sini salah satunya menangani data menggunakan PHP dan MySQL
Representasi dan visualisasi data sangat dibutuhkan saat mengembangkan aplikasi perangkat lunak karena ini adalah cara terbaik bagi mereka yang bukan pengembang perangkat lunak untuk memahami lebih baik
Untuk pengembang perangkat lunak, lebih mudah untuk menginterpretasikan data dalam format apa pun tetapi untuk non-pengembang, disarankan agar mereka diberikan cara agar mereka dapat melihat data dengan mudah.
Grafik batang digunakan untuk merepresentasikan data dengan cara yang lebih mudah sehingga seseorang dapat melacak hasil produk atau layanan. Misalnya, Anda memiliki produk dan ingin melihat bagaimana pelanggan mendaftar dari bulan ke bulan, grafik batang dapat membantu melacaknya karena akan menunjukkan tren apakah naik atau turun.
Pada artikel ini, kita akan membahas cara membuat grafik batang menggunakan PHP dan MySQL di mana jika Anda memiliki data dalam database MySQL, Anda dapat menampilkannya menggunakan grafik batang.
- Pertama, Anda harus menyertakan grafik js yang didukung oleh Google. Referensi grafik lengkap dapat ditemukan di modul pengembang grafik google https. // pengembang. google. com/chart
<script type="text/javascript" src="//www.gstatic.com/charts/loader.js"></script>
_Ingat grafik js harus diinisialisasi sebelum mengeksekusi kode grafik
- Selanjutnya, Anda perlu menentukan area di mana grafik batang akan ditampilkan dengan menentukan atribut id dalam div
<div id="bar-graph-location">
</div>
- Selanjutnya, Anda harus menyiapkan data Anda di database MySQL
Untuk demonstrasi ini, kami akan menggunakan data pelanggan untuk bulan September, Oktober, dan November
</head>
<body>
<?php
$chkresults = mysqli_query($con,"SELECT MONTH(subscribed_on) AS subscriber_month, COUNT(*) AS subscriber_count FROM subscribers GROUP BY MONTH(subscribed_on)");
?>
<script type="text/javascript">
google.charts.load('current', {'packages':['Bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Month','Subscribers'],
<?php
while($row=mysqli_fetch_assoc($chkresults)){
echo "['".$row["subscriber_month"]."',".$row["subscriber_count"]."],";
}
?>
]);
var options = {
chart: {
title: '',
},
bars: 'vertical',
vAxis: {format: 'decimal'},
height: 300,
colors: ['#d95f02']
};
var chart = new google.charts.Bar(document.getElementById('bar-graph-location'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
<!--location where bar graph will be displayed-->
<div id="bar-graph-location">
</div>
</body>
</html>
Untuk menambahkan nama bulan sebenarnya selain angka, Anda dapat menggunakan metode if else dan mencocokkan angka bulan yang benar dengan namanya
Begitulah cara kami membuat grafik batang menggunakan PHP dan MySQL menggunakan fitur grafik yang disediakan oleh Google Charts
Anda dapat menggambar grafik batang menggunakan tipe data apa pun asalkan mengikuti struktur yang disediakan. Gunakan contoh lain untuk menguji fitur ini. Selamat mengkode