How Create Charts or Graphics On Your Web Page Using PHP and MySQL
What Will I Learn?
- You will learn how to create charts
- You will learn how to show database on your web page
- You will learn how to conecting PHP-MySQL
Requirements
- you should be able to fundamentals of PHP programming
- you should be able to create a MySQL database
- You must understand the structure of the database
Difficulty
- Intermediate
Tutorial Contents
charts or graphs are data that is displayed in a more easily understood form, for example the project contribution graph on UTOPIAN-IO, this time I will share a tutorial showing charts or graphs according to the data in the database.
- first you have to do is open XAMPP control panel then run your APACHE and MySQL server as shown below.
in the picture above is the XAMPP control panel that we have run the APACHE and MySQL servers
- the next step you should do is create a database as shown below.
write down the name of the database to your liking, and make sure you write the same name at the time of the call in the PHP script.
- the next step is to create a table and fill the data into the table.
the picture above shows the table that we have filled the data
- okay then we will create an index page, type the script below in your editor then save it with the name index.php
<?php
$conn = new mysqli("localhost", "root", "", "utopian_tutorial");
if ($conn->connect_errno) {
echo die("Failed to connect to MySQL: " . $conn->connect_error);
}
$rows = array();
$table = array();
$table['cols'] = array(
array('label' => 'Kelas', 'type' => 'string'),
array('label' => 'Jumlah siswa', 'type' => 'number')
);
$sql = $conn->query("SELECT * FROM kelas");
while($data = $sql->fetch_assoc()){
$temp = array();
$temp[] = array('v' => (string)$data['kelas']);
$temp[] = array('v' => (int)$data['jumlah_siswa']);
$rows[] = array('c' => $temp);
}
$table['rows'] = $rows;
$jsonTable = json_encode($table);?>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var options = {'title':'Data siswa',
'width':500,
'height':400};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
- okay then I will explain a little about the function of the script above.
- This script works to make connections between web pages with databases.
$conn = new mysqli("localhost", "root", "", "utopian_tutorial");if ($conn->connect_errno)
- then the script below serves to retrieve data from the class table we have created
$sql = $conn->query("SELECT * FROM kelas");
- then a script that works to form the chart.
function drawChart() {
var data = new google.visualization.DataTable(<?php echo $jsonTable; ?>);
var options = {'title':'Data siswa',
'width':500,
'height':400};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);}
- okay now we will try to run the PHP file we have created, whether the chart can be displayed and in accordance with existing data in the database.
- the way is type the address of your index.php file in your browser's browser columns as shown below.
- okay chart or graph we have successfully put on our web page.
Curriculum
- How To Add Comment Field On Your Website Using PHP-MySQL
- Cara Membuat Fitur Minichat Pada Website Anda Menggunakan PHP-MySQL
- How to make website : booking bus tickets using PHP - MySQL
- How to create login form using PHP - MySQL
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @lapulga I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x