Stacked Area Chart with Google Charts and NVD3 by simzou

index.html

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript" src="main.js"></script>
  </head>
  <body>
    <div id="chart">
      <svg style="width:80%; height:800px"></svg>
    </div>
    <div id="chart_div" style="width:80%; height:800px"></div>
  </body>
</html>

main.js

google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(main);

function main() {
	url = "https://spreadsheets.google.com/feeds/list/1vLXTX80VMPvqCiyL62V2VNRJraAsyKSo1F8E6RXgnJo/2/public/values?alt=json"
	$.getJSON(url, function(json){
		var data = clean_google_sheet_json(json);
		var google_chart_data = prepare_data_for_google_chart(data);
		draw_google_chart(google_chart_data);
		var nvd3_chart_data = prepare_data_for_nvd3_chart(data);
		draw_nvd3_chart(nvd3_chart_data);
	});
}



function prepare_data_for_google_chart(data) {
	var first_row = _.keys(data[0]);
	var chart_data = [first_row];
	_.each(data, function(datum) {
		var row = [];
		_.each(first_row, function(key) {
			if (datum[key]) {

				if (key === "year") {
					row.push(new Date(datum[key]));
				} else {
					// stripping away any dollar signs
					var amount = Number(datum[key].replace(/[^0-9\.]+/g,""));
					row.push(amount);
				}

			} else {
				row.push(0);
			}
		})
		chart_data.push(row);
	});
	//console.log(chart_data);
	return chart_data;
}


function draw_google_chart(chart_data) {
	var data = google.visualization.arrayToDataTable(chart_data);

	var options = {
		isStacked: true,
		title: 'USAC Fee',
		hAxis: {title: 'Year',  titleTextStyle: {color: '#333'}},
		vAxis: {minValue: 0}
	};

	var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
	chart.draw(data, options);
}


function draw_nvd3_chart(chart_data) {
 // d3.json('data.json', function(data) {
  nv.addGraph(function() {
    var chart = nv.models.stackedAreaChart()
                  .x(function(d) { return d[0] })
                  .y(function(d) { return d[1] })
                  .clipEdge(true)
                  .useInteractiveGuideline(true)
                  ;

    chart.xAxis
        .showMaxMin(false)
        .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });

    chart.yAxis
        .tickFormat(d3.format(',.2f'));

    d3.select('#chart svg')
      .datum(chart_data)
        .transition().duration(500).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
  });
//  })
}

function prepare_data_for_nvd3_chart(data) {
  var keys = _.keys(data[0]);
  var chart_data = [];
  //_.each(keys, function(key){
  for (var i = 0; i < keys.length; i++) {
    key = keys[i];
    if (key !== 'year'){
      var elem = {};
      elem['key'] = key;
      var values = [];
      //_.each(data, function(row) {
      for (var j = 0; j < data.length; j++) {
        var row = data[j];
        var amount = row[key];
        var date = Date.UTC(Number(row['year']),1,1);
        if (amount) {
          amount = Number(amount.replace(/[^0-9\.]+/g,""));
          values.push([date, amount]);
        } else {
          values.push([date, 0]);
        }
      //});
      }
      elem['values'] = values;
      chart_data.push(elem);
    }
  //});
  }
  console.log(chart_data)
  console.log(JSON.stringify(chart_data))
  return chart_data;
}



// takes in JSON object from google sheets and turns into a json formatted 
// this way based on the original google Doc
// [
// 	{
// 		'column1': info1,
// 		'column2': info2,
// 	}
// ]
function clean_google_sheet_json(data){
	var formatted_json = [];
	var elem = {};
	var real_keyname = '';
	$.each(data.feed.entry, function(i, entry) {
		elem = {};
		$.each(entry, function(key, value){
			// fields that were in the spreadsheet start with gsx$
			if (key.indexOf("gsx$") == 0) 
			{
				// get everything after gsx$
				real_keyname = key.substring(4); 
				elem[real_keyname] = value['$t'];
			}
		});
		formatted_json.push(elem);
	});
	return formatted_json;
}