Populating column charts with google api is one of the simplest way to do. here we are showing
you a simple example to generate column chart with real time data. fetching data from database table.
Here is the sample code.
PHP Code: Includes connecting to database and fetching data from database table.
<?php
$DatabaseServer = "localhost";
$DatabaseUsername = "root";
$DatabasePassword = "root";
$DatabaseName = "demo";
$Connection = mysqli_connect($DatabaseServer, $DatabaseUsername, $DatabasePassword, $DatabaseName);
if ($Connection === false) {
die("ERROR: Could not connect. " . mysqli_connect_error());
}
$selectsql = "SELECT * FROM graph";
$result = mysqli_query($Connection, $selectsql);
?>
HTML and Javascript code uses the data from database fetched by php code and google api
to populate column chart
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses', 'Profit'],
<?php while($row = mysqli_fetch_array($result)){ ?>
['<?php echo $row['name'];?>',
<?php echo $row['value1'];?>,
<?php echo $row['value2'];?>,
<?php echo $row['value3'];?>],
<?php } ?>
]);
var options = {
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
};
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));
chart.draw(data, google.charts.Bar.convertOptions(options));
}
</script>
</head>
<body>
<div id="columnchart_material" style="width: 800px; height: 500px;"></div>
</body>
</html>
Run these queries in your database.
CREATE TABLE `graph` (
`id` int(2) NOT NULL,
`name` varchar(34) NOT NULL,
`value1` int(12) NOT NULL,
`value2` int(12) NOT NULL,
`value3` int(12) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `graph` (`id`, `name`, `value1`, `value2`, `value3`) VALUES
(1, '2014', 11, 2, 7),
(2, '2015', 2, 5, 9),
(4, '2016', 20, 9, 15),
(5, '2017', 14, 21, 5),
(6, '2018', 7, 17, 6);
Result
Everything about column chart
Google Pie Charts with PHP and MySQL
Everything about google pie chart
The information is very useful. Thank you for sharing this amazing post, I really appreciate your work. keep going
ReplyDeleteoffice.com/setup | mcafee.com/activate | www.mcafee.com/activate
Have you ever considered about adding a little bit more than just your articles? I mean, what you say is fundamental and everything. Nevertheless imagine if you added some great graphics or videos to give your posts more, "pop"! Your content is excellent but with images and clips, this blog could undeniably be one of the greatest in its niche. Good blog! sme accounting services singapore
ReplyDeletehp printer support number
ReplyDeletehp printer support number
hbomax.com/tvsignin
hbomax.com/tvsignin
download desktop gold
desktop gold download