Google Graphs: GDP

google-graphs-gdp.markdown

Google Graphs: GDP

A Pen by Polina on CodePen.

License.

index.html

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

script.js

google.charts.load('current', {
  packages: ['corechart', 'controls']
});
google.charts.setOnLoadCallback(drawDashboard);

function drawDashboard() {
  $.ajax({
    url: "https:raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json",
    dataType: "JSON"
  }).done(function(json) {
    var data_array = [
      ["Date", "GDP"]
    ];
    $.each(json.data, function() {
      var data_item = [this[0], this[1]];
      data_array.push(data_item);

    });
    var options = {
      title: "U.S. Gross Domestic Product, billions of dollars (USD)",
      subtitle:"in billions of dollars (USD)",
      interpolateNulls: true,
      legend: 'none',
      
        hAxis: {
          title: 'Date'
        },
        vAxis: {
          title: 'GDP',
          format: 'short'
        }
      };
    var tableData = google.visualization.arrayToDataTable(data_array);
    var areachart = new google.visualization.AreaChart(
      document.getElementById('chart'));
    areachart.draw(tableData,options);
  });

}

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />