https://real-time-social-webflow.webflow.io/

1<!DOCTYPE html><!-- Last Published: Sun Dec 22 2019 21:29:42 GMT+0000 (Coordinated Universal Time) --><html data-wf-domain="real-time-social-webflow.webflow.io" data-wf-page="5d657905d7c8274d14fb31be" data-wf-site="5d657905d7c8277d1efb31bd"><head><meta charset="utf-8"/><title>Google Sheets &amp; Chart.js</title><meta content="Get real-time data from Google Sheets w/ Chart.js in Webflow using simple JSON." name="description"/><meta content="width=device-width, initial-scale=1" name="viewport"/><link href="https://assets.website-files.com/5d657905d7c8277d1efb31bd/css/real-time-social-webflow.982871405.min.css" rel="stylesheet" type="text/css"/>

1<script src="https://use.typekit.net/ixm7gsx.js" type="text/javascript"></script>

1<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

1<!--[if lt IE 9]>

1<script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js" type="text/javascript"></script>

1<![endif]-->

1<script type="text/javascript">!function(o,c){var n=c.documentElement,t=" w-mod-";n.className+=t+"js",("ontouchstart"in o||o.DocumentTouch&&c instanceof DocumentTouch)&&(n.className+=t+"touch")}(window,document);</script>

1<link href="https://assets.website-files.com/5d657905d7c8277d1efb31bd/5d65790ec712fab0f7d117bb_32X32-FAVICON.png" rel="shortcut icon" type="image/x-icon"/><link href="https://assets.website-files.com/5d657905d7c8277d1efb31bd/5d65791256f08cd6e93f6c5b_256X256-S.png" rel="apple-touch-icon"/>

1<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>

1

2<script src="//script.sheetsu.com/"></script>

2
3
4
5</head><body class="body"><div class="section-gsh"><div class="div-gsh"><div class="dash-csh"><div class="box-gsh-1 third-ga-vd box-gsh"><div class="pad-gsh"><div class="center-gsh"><div class="html-embed w-embed w-script"><div class="chart" style="position: relative; height:50vh; width:100vw">
6<canvas id="myChart"></canvas>
7</div>
8

9<script>
10function BuildChart(labels, values, chartTitle) {
11    var data = {
12        labels: labels,
13        datasets: [{
14            label: chartTitle, // Name the series
15            data: values,
16            backgroundColor: ['rgb(54, 162, 225)',
17                'rgb(54, 162, 235)',
18                'rgb(54, 162, 235)',
19                'rgb(54, 162, 235)',
20                'rgb(54, 162, 235)',
21                'rgb(54, 162, 235)',
22                'rgb(54, 162, 235)',
23                'rgb(54, 162, 235)',
24                'rgb(54, 162, 235)',
25                'rgb(54, 162, 235)',
26            ],
27        }],
28    };
29
30    var ctx = document.getElementById("myChart").getContext('2d');
31    var myChart = new Chart(ctx, {
32        type: 'bar',
33        data: data,
34        options: {
35            responsive: true, // Instruct chart js to respond nicely.
36            maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height 
37            scales: {
38                xAxes: [{
39                        scaleLabel: {
40                        display: true,
41                        labelString: 'Your Account'
42                    }
43                }],
44                yAxes: [{
45                    scaleLabel: {
46                        display: true,
47                        labelString: ''
48                    }
49                }]
50            },
51        }
52    });
53
54    return myChart;
55}
56
57
58var xhttp = new XMLHttpRequest();
59  xhttp.onreadystatechange = function() {
60    if (this.readyState == 4 && this.status == 200) {
61      var json = JSON.parse(this.response);
62      console.log(json);
63
64// Map json labels  back to values array
65var labels = json.feed.entry.map(function (e) {
66  return e.gsx$twitter.$t;
67});
68      
69// Map json values back to values array
70var values = json.feed.entry.map(function (e) {
71    return e.gsx$followers.$t;e.gsx$followers2
72});
73
74BuildChart(labels, values, "Followers");
75    }
76  };
77  xhttp.open("GET", "https://spreadsheets.google.com/feeds/list/1Rz7bRjojp6CxhptfGIn7ITxGekd-RM7uUiBEE4V9cAQ/od6/public/full?alt=json", false);
78  xhttp.send();
79  	</script>

79</div></div></div></div></div></div></div><div class="subscribe-section"><div class="container-33 w-container"><h2 class="alternative-h2 yes-mid">Get your own custom dashboard.</h2><p class="paragraph-21">Enter your info below and we&#x27;ll contact you.</p><div class="form-wrapper-2 w-form"><form name="wf-form-Help-with-my-own-custom-dashboard" data-name="Help with my own custom dashboard" id="wf-form-Help-with-my-own-custom-dashboard" class="form-5 w-clearfix"><input type="email" name="email" data-name="Email" placeholder="Email address" maxlength="256" required="" class="sign-up-field w-input"/><input type="submit" value="Contact Me" data-wait="adding email..." class="sign-up-button w-button"/></form><div class="success-message-4 on-dark w-form-done"><h2 class="alternative-h2 yes">Success!</h2><p class="middle-succes">You&#x27;re all set!</p></div><div class="error-message-8 w-form-fail"><p class="paragraph-20">Oops! That&#x27;s not an email : ( </p></div></div></div></div>

79<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js" type="text/javascript" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

79<script src="https://assets.website-files.com/5d657905d7c8277d1efb31bd/js/real-time-social-webflow.0e13adb6a.js" type="text/javascript"></script>

79<!--[if lte IE 9]>

79<script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script>

79<![endif]--></body></html>