How to Create a Simple Area Chart using Google Charts API

Submitted by: 
Language: 
Visitors have accessed this post 475 times.

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="<a href="https://www.gstatic.com/charts/loader.js"></script>
  15. <script" rel="nofollow">https://www.gstatic.com/charts/loader.js"></script>
  16. <script</a> type="text/javascript">
  17. google.charts.load('current', {'packages':['corechart']});
  18. google.charts.setOnLoadCallback(drawChart);
  19.  
  20. function drawChart() {
  21. var data = google.visualization.arrayToDataTable([
  22. ['Year', 'Sales', 'Expenses'],
  23. <?php
  24. for($i = 2014; $i <= 2017; $i++){
  25. //sales
  26. $sql = "SELECT sum(sales) AS sum_sales FROM sales WHERE year(date) = '$i'";
  27. $sales_query = $conn->query($sql);
  28. $sales_row = $sales_query->fetch_assoc();
  29. //expense
  30. $sql = "SELECT sum(expenses) AS sum_expenses FROM expenses WHERE year(date) = '$i'";
  31. $expense_query = $conn->query($sql);
  32. $expense_row = $expense_query->fetch_assoc();
  33. //displaying the needed data
  34. echo '["'.$i.'", '.$sales_row['sum_sales'].', '.$expense_row['sum_expenses'].'],';
  35. }
  36. ?>
  37. //
  38. // ['2013', 1000, 400],
  39. // ['2014', 1170, 460],
  40. // ['2015', 660, 1120],
  41. // ['2016', 1030, 540]
  42. ]);
  43.  
  44. var options = {
  45. title: 'Company Performance',
  46. hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
  47. vAxis: {minValue: 0}
  48. };
  49.  
  50. var chart = new google.visualization.AreaChart(document.getElementById('area_chart'));
  51. chart.draw(data, options);
  52.  
  53. }
  54. </script>
  55. </body>
  56. </html>

That ends this tutorial. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.