/
index2.html
executable file
·38 lines (33 loc) · 1.54 KB
/
index2.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(
'https://docs.google.com/spreadsheets/d/1eko8LIH17ZXOKfWEEQtOBr5dOWQEU-jLDxi48Qj2-Q8/edit#gid=0');
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
console.log(data);
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(data, { legend: { position: 'none' } });
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body style="margin:0px;">
<div style="overflow:hidden;background:url('http://sfsummerjobs.org/wp-content/uploads/2014/04/SummerJobs-Hero-Slider-01@2x-960x300_c.jpg') no-repeat top center;background-size:cover;height:250px;margin: 0 0 0 0; padding: 0 0 0 0;opacity:1">
<img src="images/logo-lg.png" style="margin: 0 auto;display:block;padding:2.5em;background-color:#fff;position:relative;top:2em; ">
</div>
<p style="font-family:'Montserrat',Arial,sans-serif;font-size:24px;text-align:center;color:#222;">Live Summer Jobs Pledge Tally</p>
<span id='columnchart'></span>
</body>
</html>