From an embedded (iframe) snippet on google-site, reference a json file stored on google drive

Question

I am trying to embed an interactive chart in HTML format in google-site. I made this plot using using vega-lite. To embed it in google-site from the google-sites "edit-mode", I choose Insert>Embed>Embed code and simply paste the HTML content in the box.

The vega-lite charts take data encoded in JSOn format. One can read the input data from a JSON file hosted elsewhere other than google drive, as shown in this example: https://vega.github.io/vega-lite/docs/data.html#url. But from my experience vega-lite was unable to read the data from a json file located on google-drive.

So my question is: Can I read a json file located on google-drive (private/shared) to display an vega-lite plot on google-sites?

I hope that this would be be possible. That would be so great. It will streamline the presentation of interactive plots so much.

As an example, here's the content of an HTML file generated using vega-lite that I embed in google drive

<!DOCTYPE html>
<html>
  <head>
    <title>Embedding Vega-Lite</title>
    <script src="https://cdn.jsdelivr.net/npm/vega@5.21.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.2.0"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.20.2"></script>
  </head>
  <body>
    <div id="vis"></div>

    <script type="text/javascript">
      var yourVlSpec = {
        $schema: 'https://vega.github.io/schema/vega-lite/v5.json',
        description: 'A simple bar chart with embedded data.',
        data: {
          values: [
            {a: 'A', b: 28},
            {a: 'B', b: 55},
            {a: 'C', b: 43},
            {a: 'D', b: 91},
            {a: 'E', b: 81},
            {a: 'F', b: 53},
            {a: 'G', b: 19},
            {a: 'H', b: 87},
            {a: 'I', b: 52}
          ]
        },
        mark: 'bar',
        encoding: {
          x: {field: 'a', type: 'ordinal'},
          y: {field: 'b', type: 'quantitative'}
        }
      };
      vegaEmbed('#vis', yourVlSpec);
    </script>
  </body>
</html>

I would like to provide the data from the json file stored on google drive and supply it to the datasets field i.e. instead of

        data: {
          values: [
            {a: 'A', b: 28},
            {a: 'B', b: 55},
            {a: 'C', b: 43},
            {a: 'D', b: 91},
            {a: 'E', b: 81},
            {a: 'F', b: 53},
            {a: 'G', b: 19},
            {a: 'H', b: 87},
            {a: 'I', b: 52}
          ]
        },

I would like to get the data from a json file on google-drive like this:

        data: "https://drive.google.com/uc?export=view&id=FILE_ID"

Have you tried making a fetch request to the google drive api? — Spankied, Dec 19 '21 at 17:02
How do I do that from within the HTML code? Do I need to format the URL in certain way? — , Dec 19 '21 at 17:05
There was a typo in the title. Just corrected it. Sorry about that. — , Dec 19 '21 at 17:12
IDK what an embedded snippet is. In your question clearly state what you are doing and what you want to achieve. I.e., I am embedding an iframe on google.com and want to retrieve the google search query in my iframe. — Spankied, Dec 19 '21 at 17:15

score 1 · Answer 1 · answered Dec 19 '21 at 17:21

This seems like a followup to your question here: Why is an image from google drive not displayed on google site through an embeded html, made using Altair (vega-lite)

As with the previous answer, the issue is that drive.google.com CORS headers do not allow access to drive resources from other domains. You can confirm this by using curl to print the headers:

$ curl -I https://drive.google.com/uc?export=view&id=0B6wwyazyzml-OGQ3VUo0Z2thdmc
HTTP/2 400 
content-type: text/html; charset=UTF-8
p3p: CP="This is not a P3P policy! See g.co/p3phelp for more info."
cross-origin-opener-policy-report-only: same-origin; report-to="coop_gse_l9ocaq"
<...>

What this means is that you cannot access this file from Javascript running on another domain. There is no way around this: it's a security feature built-in to modern browsers.

Yup, this was a follow up. :) And thank you for the answer again! — , Dec 19 '21 at 17:36
Too bad this is not possible. It would have been so cool to generate cloud-based data presentations (private/shared) using google-sites: (1) host the data json files/images on google drive and (2) reference them from google-sites. I hope someday, such a thing would be possible. I will (desperately) look forward to it. :) — , Dec 19 '21 at 17:36

From an embedded (iframe) snippet on google-site, reference a json file stored on google drive

1 Answers1