Skip to main content

How to Create a Simple Area Chart using Google Charts API


Creating our Database

First, we are going to create our database which contains the sample data that we are going to present using Google Chart API in the form of area chart.

I've included a .sql file in the downloadable of this tutorial which is a mysql database file. All you have to do is import the said file. If you have no idea on how to do this, please refer to my tutorial, How import .sql file to restore MySQL database.

You should be able to create a database with tables named database.

Creating the Presentation

Lastly, we create the page where we present the data using area chart. Create a new file, name it as index.php and paste the codes below.

  1. <?php
  2. //connection
  3. $conn = new mysqli('localhost', 'root', '', 'database');
  4. ?>
  5. <!DOCTYPE html>
  6. <html>
  7. <head>
  8. <meta charset="utf-8">
  9. <title>How to Create a Simple Area Chart using Google Charts API</title>
  10. </head>
  11. <body>
  12. <div id="area_chart" style="width: 900px; height: 500px;"></div>
  13.  
  14. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  15. <script type="text/javascript">
  16. google.charts.load('current', {'packages':['corechart']});
  17. google.charts.setOnLoadCallback(drawChart);
  18.  
  19. function drawChart() {
  20. var data = google.visualization.arrayToDataTable([
  21. ['Year', 'Sales', 'Expenses'],
  22. <?php
  23. for($i = 2014; $i <= 2017; $i++){
  24. //sales
  25. $sql = "SELECT sum(sales) AS sum_sales FROM sales WHERE year(date) = '$i'";
  26. $sales_query = $conn->query($sql);
  27. $sales_row = $sales_query->fetch_assoc();
  28. //expense
  29. $sql = "SELECT sum(expenses) AS sum_expenses FROM expenses WHERE year(date) = '$i'";
  30. $expense_query = $conn->query($sql);
  31. $expense_row = $expense_query->fetch_assoc();
  32. //displaying the needed data
  33. echo '["'.$i.'", '.$sales_row['sum_sales'].', '.$expense_row['sum_expenses'].'],';
  34. }
  35. ?>
  36. //
  37. // ['2013', 1000, 400],
  38. // ['2014', 1170, 460],
  39. // ['2015', 660, 1120],
  40. // ['2016', 1030, 540]
  41. ]);
  42.  
  43. var options = {
  44. title: 'Company Performance',
  45. hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
  46. vAxis: {minValue: 0}
  47. };
  48.  
  49. var chart = new google.visualization.AreaChart(document.getElementById('area_chart'));
  50. chart.draw(data, options);
  51.  
  52. }
  53. </script>
  54. </body>
  55. </html>

That ends this tutorial. Happy Coding :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Add new comment

CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.