What is google chart?

Google chart API helps you create dynamic charts for your web application. You can use them in your web application and create different types of charts listed below:

There are lot more then above list that you can create using google charts api.

Demo Application

Google chart using php

How to setup google chart api?

It is very easy to setup google chart api all you need is a cdn (remote javascript file) and paste it in your html file. Use some of the examples provided by google api and modify it as per your project requirements.

Following is a cdn for google chart api:

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

Include above javascript file in your html file and you are all set. Now, all you need is to learn basic syntax to create different types of charts.

Let's learn how to create a pie chart using google chart api and php language. As you know that using php language you can create dynamic web application.

You can either pull data from the database using php or create php arrays to store some data and use it with html and create dynamic apps.

Google chart api and php

In this example, we will create php array to store pizza toppings and using php functions we will convert php array to javascript array.

Using google chart api and our javascript array we will create a pie chart. Have a look at following code:

<?php

    /**
     * You can create local php arrays to
     * store some sort of data. You can even
     * create php arrays by using data stored
     * in your mysql database 
     */
    $pizza_toppings = [
        ['Mushrooms', 3],
        ['Onions', 1],
        ['Olives', 1],
        ['Zucchini', 1],
        ['Pepperoni', 2],
        ['Jalapeno', 2],
    ];

?>

<html>
<head>

    <title>Sample Pie Chart</title>

    <!--Load the AJAX API-->
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {

            // Create the data table.
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Topping');
            data.addColumn('number', 'Slices');
            data.addRows(<?=json_encode($pizza_toppings)?>);

            // Set chart options
            var options = {'title':'How Much Pizza I Ate Last Night',
                'width':400,
                'height':300};

            // Instantiate and draw our chart, passing in some options.
            var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
            chart.draw(data, options);
        }
    </script>
</head>

<body>

<!-- Div that will display the pie chart -->
<div id='pie_chart'>This Div will hold the Pie chart</div>

</body>
</html>

Summary

  • we created a php file i.e. index.php
  • we added some html5 code
  • we added google chart cdn using javascript tag
  • in body tag we added a div with id pie_chart
  • on api load we added a call back function that creates chart dynamically
  • we pass php array and coverted it to javascript array and supplied to our function

If your website is database driven and you want to create google chart using your data from database you can replace php array dynamically.

You can fetch data from the database using php and pdo and then create php array of pizza toppings and it will work like charm that is why we call it dynamic where we replace static contents with database data.