Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Friday, February 23, 2018

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>
    <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'],
          ['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>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </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

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>
    <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'],
          ['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>
    <div id="columnchart_material" style="width: 800px; height: 500px;"></div>
  </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

More Posts

FOLLOW