PHP JavaScript: 02/23/18

Google Stacked column charts

You can create a stacked column chart by setting isStacked option true in the normal column chart code.

Here we are explaining the simple example.

Html Code

<html>

<head>

google.charts.load('current', {'packages':['bar']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Year', 'Sales', 'Expenses', 'Profit'],

['2014', 1000, 400, 200],

['2015', 1170, 460, 250],

['2016', 660, 1120, 300],

]);

var options = {

chart: {

title: 'Company Performance',

subtitle: 'Sales, Expenses, and Profit: 2014-2017',

isStacked:true,

colors:['orange'],

};

var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

chart.draw(data, google.charts.Bar.convertOptions(options));

}

</script>

</head>

<body>

</body>

</html>

Result

Google Column Charts with PHP and MySQL

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

Everything about google column chart

A column chart is a graphical representation of data. Where column chart displays data as vertical bars. Here we are showing a simple example of column chart with the help of Google API.

The below column chart represents the company performance in the last five years. Representing years on the x-axis and performance count on the y-axis.

Here is the sample code

<html>

<head>

google.charts.load('current', {'packages':['bar']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

var data = google.visualization.arrayToDataTable([

['Year', 'Sales', 'Expenses', 'Profit'],

['2014', 1000, 400, 200],

['2015', 1170, 460, 250],

['2016', 660, 1120, 300],

['2017', 1030, 540, 350],

['2018', 1000, 500, 300]

]);

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>

</body>

</html>

Add these lines to your options variable

1. For 3D model pie chart.
is3D: true,

2. Adding background to pie chart
backgroundColor: 'skyblue',

3. Change title text color and size
titleTextStyle: { color: 'red', fontSize:16},

4. Change colors of column bars
colors: ['#e0440e', '#e6693e', '#ec8f6e'],

5. Change bar width

bar: {groupWidth: '50%'},

Result

PHP JavaScript

Google Stacked column charts

Google Column Charts with PHP and MySQL

Everything about google column chart

Labels

Popular Posts