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; }