Tutorial bagan js php mysql

Ada banyak cakupan dalam dokumentasi penggunaan objek data yang dideklarasikan dalam kode serta mengimpor data Anda dari file menggunakan pemuat data AnyChart. Tapi bagaimana dengan mengimpor data dari database SQL?

Sayangnya, tidak mungkin menggunakan JavaScript untuk membuat kueri basis data karena JavaScript adalah solusi sisi klien dan kueri basis data memerlukan pendekatan sisi server karena masalah keamanan — Anda tidak dapat menyimpan login dan kata sandi basis data dalam kode JavaScript Anda. Ada banyak solusi untuk masalah ini termasuk pendekatan yang melibatkan PHP, Ajax, Node. js, dan masih banyak lagi. Hari ini kita akan fokus menggunakan PHP untuk menangani tugas ini ketika data kita disimpan di MySQL

Dalam tutorial ini, kita akan membahas cara query database MySQL menggunakan PHP. Kami akan menjelaskan langkah-langkah yang terlibat dan mengungkapkan bahwa itu sebenarnya tidak menantang sama sekali, hanya berbeda

Cara Mengakses Database MySQL Menggunakan PHP

Proses kami dapat dipecah menjadi dua langkah yang jelas. Pertama, kita akan menggunakan PHP untuk mengakses database MySQL kita sebelum menanyakan tabel dan menambahkan hasilnya ke objek JSON. Langkah kedua cukup menggambar bagan dengan cara yang sama seperti yang biasa Anda lakukan

1. Buat skrip PHP

Langkah pertama adalah membuat skrip PHP. Ini dapat dilakukan dengan menggunakan tag pembuka dan penutup berikut. Semua kode yang ditulis dalam tag ini dibaca oleh server sebagai PHP

2. Deklarasikan variabel database MySQL

Selanjutnya, kita mendeklarasikan variabel database MySQL kita yang diperlukan untuk mengakses database kita. Kami membutuhkan nama pengguna, kata sandi, host, dan nama basis data. Dalam kode di bawah ini kami telah menambahkan informasi boneka untuk tujuan menunjukkan kepada Anda bagaimana hal ini dilakukan. Silakan ganti string ini dengan informasi yang diperlukan untuk database Anda sendiri

Perhatikan bahwa jika Anda telah menyiapkan database lokal, nama host adalah "localhost" dan seringkali nama pengguna default adalah "root"

$username = "anychart_user"; // use your username  
$password = "password";      // use your password
$host = "localhost";         // use your host name or address 
$database="local_db";        // use your database name

3. Hubungkan ke basis data

Pada langkah ketiga, kami akan terhubung ke database kami menggunakan variabel yang telah ditentukan sebelumnya. Kami melakukannya dengan kode berikut. Baris pertama membuat koneksi ke server sedangkan baris kedua menghubungkan kita ke database yang benar

// connect to database
$server = mysql_connect($host, $username, $password);
$connection = mysql_select_db($database, $server);

4. Lakukan kueri

Setelah koneksi kami dibuat, kami dapat melakukan kueri. Bagi Anda yang baru menggunakan SQL, kueri secara efektif merupakan penyelidikan ke database yang mengembalikan data yang diminta. Di bawah ini, kami melakukan kueri sederhana yang mengambil semua bidang dan semua nilai dari tabel contoh. Anda harus mengganti ini dengan kueri yang sesuai untuk kebutuhan Anda. 3 baris pertama membuat string kueri sementara baris terakhir melakukan kueri

// perform query
// you may need to tune the query if your database is different
$myquery = "
  SELECT * FROM  `data`
  ";
$query = mysql_query($myquery);

Kami kemudian menambahkan kode berikut untuk memberi tahu kami jika kueri tidak mengembalikan data

if ( ! $query ) {
  echo mysql_error();
  die;
}

5. Membuat data dari kueri

Pada langkah kelima, kami mendeklarasikan variabel 'data' sebagai larik kosong sebelum mengisi larik ini dengan hasil kueri yang kami kembalikan. Kami melakukan ini dengan mengulangi data kueri yang dikembalikan dengan loop for

// create data object
$data = array();

for ($x = 0; $x < mysql_num_rows($query); $x++) {
  $data[] = mysql_fetch_assoc($query);
}

6. Enkode data ke format JSON

Sekarang setelah kita memiliki data dalam array, kita perlu mengubahnya menjadi format yang dapat digunakan dengan AnyChart. AnyChart bekerja dengan berbagai format, termasuk CSV, JSON, XML, dan bahkan Google Spreadsheets. Kali ini, kami akan menyandikan data kami sebagai JSON. Ini mudah dilakukan dengan kode berikut

// encode data to json format
echo json_encode($data);

7. Tutup koneksi

Langkah terakhir dalam skrip PHP kami adalah menutup koneksi yang kami miliki dengan server kami

// close connection
mysql_close($server);

Dengan semuanya disatukan, kami memiliki skrip PHP berikut

Kode di atas terhubung ke database MySQL kami, menanyakannya, dan mengembalikan data yang kemudian diekspos dalam format JSON. Dengan semua data kami siap, kami dapat memasuki bagian yang menyenangkan. Grafik JS

8. Gambar Bagan

Setelah data kami diimpor menggunakan PHP, sangat mudah digunakan dengan AnyChart. Yang perlu kita lakukan adalah menggunakan modul adaptor data yang sama dengan yang kita gunakan untuk mengimpor file. Kita bisa melakukannya dengan skrip berikut

Setelah selesai, kami cukup merujuk ke skrip PHP kami saat memuat data. Seperti ini

$username = "anychart_user"; // use your username  
$password = "password";      // use your password
$host = "localhost";         // use your host name or address 
$database="local_db";        // use your database name

Dan sebaliknya, bisnis seperti biasa dengan seluruh kode HTML/CSS/JavaScript di bawah ini

$username = "anychart_user"; // use your username  
$password = "password";      // use your password
$host = "localhost";         // use your host name or address 
$database="local_db";        // use your database name

Kesimpulan

Seperti yang Anda lihat, pendekatan untuk menangani data untuk visualisasi data ini jauh lebih mudah diakses daripada yang Anda kira. Dengan mengikuti langkah-langkah yang jelas ini, kita dapat dengan mudah menggunakan PHP untuk menanyakan database kita, mengambil data sebagai objek JSON sebelum memvisualisasikannya menggunakan AnyChart

Contoh menghubungkan database MySQL ke diagram JS yang dibuat dengan AnyChart yang dijelaskan dalam tutorial ini cukup mendasar. Jika Anda adalah developer yang lebih berpengalaman dan merasa siap untuk integrasi yang lebih rumit, Anda mungkin juga tertarik untuk melihat PHP, Symfony dan MySQL, PHP, Laravel dan MySQL, PHP, Slim dan MySQL, dan template integrasi PHP lainnya, serta

Meskipun kami berfokus pada PHP dalam tutorial ini, harus dicatat bahwa pendekatan lain dapat dilakukan, mudah, dan mungkin lebih cocok untuk kasus penggunaan Anda. Ini termasuk menggunakan WebSockets, Comet, Ajax, Node. js, dan lainnya. Jika Anda membutuhkan tutorial tentang salah satu dari teknologi ini, jangan ragu untuk menghubungi saya dan/atau tim AnyChart dan saya yakin kami dapat membantu Anda

Anda juga dapat menambahkan lebih banyak data dalam keluaran JSON dan untuk bagan yang lebih kompleks

Rogerio    31 Agustus 20 6. 36 sore

Terima kasih banyak, Rogerio. Poin bagus. Kami akan memperbarui tutorial dan menunjukkan cara melakukannya di versi yang lebih baru

Bagaimana cara menggunakan chart js dengan database MySQL?

Bagaimana cara menggunakan grafik js di PHP?

Bagaimana cara membuat grafik di PHP menggunakan MySQL?

Bagaimana cara membuat diagram lingkaran dinamis dalam PHP atau JavaScript dengan MySQL?