# Introduction

SQL Across Your CSV, Google Sheets, JSON, and Airtables

![](/files/-MXZ_bpcz2u6BFzxDGn8)

Here are the resources for running the usage tutorials for [UseSQL](https://usesql.com/?ref=github).

👉  Have a question? Send your question over to <support@usesql.com> and we will get back to you.


# Source Formats

Below are the accepted source formats, and links to some example usage.

* [Google Sheets](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1089437561%22%0AWHERE%20Type%20!%3D%20%27Desserts%27%0AORDER%20BY%20Type%20DESC\&format=html)
* [Websites (HTML Tables)](https://www.usesql.com/demo?query=SELECT%20Security%2C%20Symbol%2C%20Founded%0AFROM%20%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_S%2526P_500_companies%22%0AORDER%20BY%20Founded%0ALIMIT%2020\&format=html)
* [CSV Files](https://www.usesql.com/demo?query=SELECT%20*%0AFROM%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fdylanroy%2Fceo-dataset%2Fmain%2Fdata.csv%22%0ALIMIT%2020\&format=html)
* [Airtable](https://www.usesql.com/demo?query=SELECT%20Name%2C%20URL%20FROM%20%22https%3A%2F%2Fairtable.com%2FshroJUnvPdjnCYzhm%2Ftbl6JIxSwCw4LKDlr%2FviwexsHe9vTdMGNQZ%22)
* [MySQL](https://docs.usesql.com/tutorials/displaying-reports-in-google-sheets-from-mysql)
* [StackBy](https://www.usesql.com/demo?query=SELECT%20%0ACOUNT\(%22Project%20Name%22\)%20as%20projects%2C%0ASUM\(%22Total%20Hours%20Worked%22\)%20as%20hours%2C%0ACONCAT\(%27%24%27%2C%20ROUND\(AVG\(SUBSTR\(%22Project%20Rate%20Per%20Hour%22%2C%202\)\)%2C%202\)\)%20as%20rate%0AFROM%20%22https%3A%2F%2Fstackby.com%2Fstack%2FstJMXZMzvH293NHq3S%2Ftbl1575000948100df97c5%3Fapi-key%3DR8Nt2XYfnfO534O3%22\&format=html)
* [RSS](https://www.usesql.com/demo?query=SELECT%20title%2C%20link%2C%20summary%20FROM%20%22https%3A%2F%2Fdylanroy.medium.com%2Ffeed%22%20LIMIT%2010\&format=html)
* [JSON](https://www.usesql.com/demo?query=SELECT%20title%2C%20link%2C%20summary%20FROM%20%22https%3A%2F%2Fdylanroy.medium.com%2Ffeed%22%20LIMIT%2010\&format=html)


# Output Formats

Below are the accepted output formats, and links to some example usage.

* [HTML](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1089437561%22%0AWHERE%20Type%20!%3D%20%27Desserts%27%0AORDER%20BY%20Type%20DESC\&format=html)
* [CSV](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1089437561%22%0AWHERE%20Type%20!%3D%20%27Desserts%27%0AORDER%20BY%20Type%20DESC\&format=csv)
* [JSON](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1089437561%22%0AWHERE%20Type%20!%3D%20%27Desserts%27%0AORDER%20BY%20Type%20DESC\&format=json)
* [TSV](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1089437561%22%0AWHERE%20Type%20!%3D%20%27Desserts%27%0AORDER%20BY%20Type%20DESC\&format=tsv)
* [Image (.png)](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1089437561%22%0AWHERE%20Type%20!%3D%20%27Desserts%27%0AORDER%20BY%20Type%20DESC\&format=image)
* [Datatable](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fdylanroy%2Fceo-dataset%2Fmain%2Fdata.csv%22\&format=datatable)
* [Sparkline](https://www.usesql.com/demo?query=SELECT%20price%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1915418685%22%0AORDER%20BY%20%22Date%22\&format=sparkline)
* [Bar Chart](https://www.usesql.com/demo?query=SELECT%20%22Date%22%2C%20low%2C%20price%2C%20high%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1915418685%22%20ORDER%20BY%20%22Date%22\&format=barchart)
* [Line Chart](https://www.usesql.com/demo?query=SELECT%20%22Date%22%2C%20low%2C%20price%2C%20high%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1915418685%22%20ORDER%20BY%20%22Date%22\&format=linechart)
* [Pie Chart](https://www.usesql.com/demo?query=SELECT%20Type%2C%20COUNT\(1\)%20Items%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1431229824%22%0AGROUP%20BY%20Type\&format=piechart)
* [Doughnut Chart](https://www.usesql.com/demo?query=SELECT%20Type%2C%20COUNT\(1\)%20Items%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F1wUc7i945x-tenP9Wb1bAihnaMB3MDkRnBKcoG9sniGE%2Fedit%23gid%3D1431229824%22%0AGROUP%20BY%20Type\&format=doughnutchart)
* [RSS](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM%2Fedit%23gid%3D1803459289%22\&format=rss)
* [Sitemap](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM%2Fedit%23gid%3D1023772886%22\&format=sitemap)


# Managing Keys

When a user initially signs up they will have the ability to create whatever keys they need to make calls out to the API. Once a key exists the user can test out their queries, and build requests in their own [sandbox](/getting-started/sandbox).

![](/files/-M_XNmJihVG-e2iQLtdl)


# Sandbox

The sandbox is a place that can be used when developing your queries. Once a query is submitted, it will return the SQL query results and build the API request needed to retrieve the data.

![](/files/-M_XOmxq2MvI23KZx8Oo)


# Saved Queries

To retrieve the data faster and cache the response saved queries can be used. These can also be used to hide the sources of the query. In the example below we retrieve user submitted genres for Netflix which would be called using the endpoint returned when clicking on view. For this example the url would be the following:

{% embed url="<https://usesql.com/query/Kxa1e2/netflix-genres>" %}

To refresh the cached results one just needs to append the query parameter `refresh=True` as shown below:

{% embed url="<https://usesql.com/query/Kxa1e2/netflix-genres?refresh=True>" %}

![](/files/-M_XOcd3veEMfZYk35Ph)


# HTML Templating

## Introduction

The templating library provided by UseSQL gives the ability to interact with integrating into the front end of your choice without needing to know JavaScript. You simply indicate where you want your data to appear, and include our script to integrate.

## Getting Started

### 1. Include UseSQL Templating SDK

Before you can the UseSQL Templating SDK you need to include the snippet below before the `</body>` tag.

```
<script src="https://load.usesql.com"></script>
```

### 2. Add Basic UseSQL Attributes To HTML

After including the UseSQL library we now can identify where we want to include our UseSQL query results, and append some attributes to our HTML. There are two required attributes to include. These attributes are `useql` which is for the value we provide the query we want to retrieve results for or the URL for the saved query, and `usesql-key` which is the key you will be using to permission the query.

Optionally you can change the delimiters of your query which may be required if you use something like Flask which includes Jinja templates with the same delimiters. The attributes to do this would be `usesql-delimiter-start` and `usesql-delimiter-end`.

Below is an example of embedding a table in a webpage.

```
<html>
<body>
    <h2>Use Cases</h2>
    <div 
        usesql='SELECT * FROM "https://docs.google.com/spreadsheets/d/14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM/edit#gid=0"' 
        usesql-key="YOUR_KEY_GOES_HERE">
    </div>
    <script src="https://load.usesql.com"></script>
</body>
</html>
```

### 3. Insert Data Using Template Delimiters

The next step is to embed your data. For this step, you just need to include your data. The query in this example has the following data: image, title, description, and link. Your data by default can be included with the starting delimiter `{{` and the ending delimiter `}}` so for example if you want to include the title data you would include it enclosed as done here: `{{title}}`.

As long as your UseSQL attributes are a parent element or above your data will be included, and the enclosed HTML will be repeated for each row of data you have.

```
<html>
<body>
    <h2>Use Cases</h2>
    <div 
        usesql='SELECT * FROM "https://docs.google.com/spreadsheets/d/14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM/edit#gid=0"' 
        usesql-key="YOUR_KEY_GOES_HERE">
        <div>
            <a href="{{link}}">
                <div>
                    <ul>
                        <li class="half-width">
                            <img src="{{image}}">
                        </li>
                        <li>
                            <span>{{title}} &rarr;</span>
                            <p>{{description}}</p>
                        </li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
    <script src="https://load.usesql.com"></script>
</body>
</html>
```

At this point, you should be able to see your data on your page when loaded into the browser of your choice. For any additional questions please contact `support@usesql.com` or take a look at our FAQ that will continue to grow as we get more incoming questions about this library.

## FAQ

#### I use another templating system that uses {{ and }}. Can I avoid this conflict?

Yes, with the UseSQL Templating SDK you can change those starting and ending delimiters to whatever you want. Below is an example of how to do this. In this example they are changed to `~`

```
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-7 text-center">
            <h2 class="title">Use Cases</h2>
        </div>
    </div>
    <div class="row" usesql='SELECT * FROM "https://docs.google.com/spreadsheets/d/14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM/edit#gid=0"'
         usesql-delimiter-start="~"
         usesql-delimiter-end="~"
         usesql-key="YOUR_KEY_GOES_HERE">
        <div class="col-lg-6 pb-3">
            <a href="~link~">
                <div class="card card-shadow">
                    <ul class="img-inline">
                        <li class="half-width">
                            <img src="~image~" class="img-responsive rounded-left">
                        </li>
                        <li class="p-3 half-width">
                            <span class="h5">~title~ &rarr;</span>
                            <p>~description~</p>
                        </li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
    <div id="usesql-container" class="row"></div>
</div>
<script src="https://load.usesql.com"></script>
```

The key is to include the statements defining the new start and end delimiters as shown above with the following commands `usesql-delimiter-start="~"` and `usesql-delimiter-start="~"`. These commands change both {{ and }} to \~ for the starting and ending delimiter.

#### How would I provide a saved query to the templates?

You would just provide the URL directly instead of a query. Below is an example of this:

```
<html>
<body>
    <h2>Use Cases</h2>
    <div usesql='https://usesql.com/query/9g1jI3/usecases'>
        <div>
            <a href="{{link}}">
                <div>
                    <ul>
                        <li class="half-width">
                            <img src="{{image}}">
                        </li>
                        <li>
                            <span>{{title}} &rarr;</span>
                            <p>{{description}}</p>
                        </li>
                    </ul>
                </div>
            </a>
        </div>
    </div>
    <script src="https://load.usesql.com"></script>
</body>
</html>
```


# JavaScript Web Client

## Introduction

For those of you that know JavaScript, and want a more custom integration, but with a web client that makes it easier to work with JavaScript without the need to make calls directly out to the API endpoints, we have provided this for you.

There are three ways to integrate the results from UseSQL into your web pages make a call directly out to our API as done in our "Integrate With Your Static Site" tutorial, use the UseSQL templating library as seen here, or use this JavaScript web client.

To start using the JavaScript web client keep following along below otherwise, the other two options have some documentation linked above.

## Getting Started

### &#x20;1. Include UseSQL JavaScript SDK

Before you can the UseSQL JavaScript SDK you need to include the snippet below before the `</body>` tag.

```
<script src="https://script.usesql.com"></script>
```

### 2. Use Client To Request Query Results

The next step is to provide the query we want to retrieve using our web client. Here you can provide the query directly or the URL for a saved query. If you are providing the query directly you will need to provide your key as well. An example of this can be shown below.

```
...
UseSQL.query(`SELECT * FROM "https://docs.google.com/spreadsheets/d/14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM/edit#gid=0"`,
                {key: "PROVIDE_YOUR_KEY_HERE"}, {});
...
```

### 3. Update Your Callback

Now that we know how to make a call to the UseSQL API using the web client all that needs to happen is to provide a callback to start working with the data. In the example below we just print out the results, but at this point, you can do anything you want with the data.

```
<html>
<body>
<script>
    function successFunc(data) {
      console.log(data);
    }
    UseSQL.query(`SELECT * FROM "https://docs.google.com/spreadsheets/d/14nfqS4gh7KudU7-kRU5thHP_54G_ghe7PgYj5W_CyPM/edit#gid=0"`,
                {key: "PROVIDE_YOUR_KEY_HERE"}, successFunc);
</script>
</body>
</html>
```

At this point, you should be able to see your data in your browser console when loaded into the browser of your choice. For any additional questions please contact `support@usesql.com` or take a look at our FAQ that will continue to grow as we get more incoming questions about this library.

## Parameters

After providing the query there are a number of parameters that can be or are required to be provided.

| Key    | Required | Description                                                                                                                              |
| ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| key    | No\*     | This is where you define the key that authorizes the query to UseSQL.                                                                    |
| format | No       | The format is `json` by default, but you can include any value defined in our [Output Formats](/getting-started/output-formats) section. |

\*This needs to be included unless you are providing the URL for a saved query.

## FAQ

#### How would I provide a saved query to the JavaScript web client?

You would just provide the URL directly instead of a query. Below is an example of this:

```
UseSQL.query(`https://usesql.com/query/9g1jI3/usecases`, {}, successFunc);
```


# Integrate With Your Static Site

## Tutorial: Integrate With Your Static Site

In this tutorial you will learn how to embed query results from UseSQL into your static site. This will be very similar to the methods used in the Ghost tutorial. If anything is unclear feel free to reach out for assistance.

### Step 1: Build Your Query In Sandbox or OpenAPI Docs

You have a couple of options to streamline the creation of your queries. The one we will use in this tutorial will be using your standbox. We will be submitting the following query to the [sandbox](https://www.usesql.com/sandbox) to generate our API request.

```
SELECT a.Symbol, a.Security, b.Executive 
FROM "https://en.wikipedia.org/wiki/List_of_S%26P_500_companies" a 
JOIN "https://raw.githubusercontent.com/dylanroy/ceo-dataset/main/data.csv" b ON a.Security = b.Company
```

Which generates the following request

```
https://usesql.com/sql?query=SELECT%20a.Symbol%2C%20a.Security%2C%20b.Executive%20%0AFROM%20%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_S%2526P_500_companies%22%20a%20%0AJOIN%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fdylanroy%2Fceo-dataset%2Fmain%2Fdata.csv%22%20b%20ON%20a.Security%20%3D%20b.Company&format=html&key={YOUR_API_KEY}
```

Note: You can try this out for yourself if you are logged in [here](https://www.usesql.com/sandbox?query=SELECT%20a.Symbol%2C%20a.Security%2C%20b.Executive%20%0AFROM%20%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_S%2526P_500_companies%22%20a%20%0AJOIN%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fdylanroy%2Fceo-dataset%2Fmain%2Fdata.csv%22%20b%20ON%20a.Security%20%3D%20b.Company). If you don't have an account you can also use the demo interface [here](https://www.usesql.com/demo?query=SELECT%20a.Symbol%2C%20a.Security%2C%20b.Executive%20%0AFROM%20%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_S%2526P_500_companies%22%20a%20%0AJOIN%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fdylanroy%2Fceo-dataset%2Fmain%2Fdata.csv%22%20b%20ON%20a.Security%20%3D%20b.Company).

After this you just need to either add a new key or use an existing key.&#x20;

![](https://camo.githubusercontent.com/792bee8df976fb6f5d4f8da384332ea7bc90279a22649dee059846b2584aaa45/68747470733a2f2f75736573716c2e6769746875622e696f2f7475746f7269616c732f646f63732f696d616765732f6164642d6f722d7573652d6b65792e706e67)

### Step 2: Embed Your Query

```
  <div id="sql-result"></div>
  <script>
  fetch('https://usesql.com/sql?query=SELECT%20a.Symbol%2C%20a.Security%2C%20b.Executive%20%0AFROM%20%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_S%2526P_500_companies%22%20a%20%0AJOIN%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fdylanroy%2Fceo-dataset%2Fmain%2Fdata.csv%22%20b%20ON%20a.Security%20%3D%20b.Company&format=html&key={YOUR_API_KEY}')
  .then(response => response.text())
  .then(data => document.getElementById('sql-result').innerHTML = data);
  </script>
```

At this point you can see your results. The demo can be seen [here](https://usesql.github.io/tutorials/static-sites/) with the styling from step 4, and the source can be seen [here](https://github.com/usesql/tutorials/blob/main/static-sites/index.html#L17-L22).

### Step 3: Secure Your Key (Optional)

It's pretty easy to secure our key. To add these restrictions we need to login, and navigate to our dashboard clicking on the domains link for the key that we want to add the restriction to shown below.&#x20;

![](https://camo.githubusercontent.com/350a06cb1eb026215b2bf87b402f91934085ea69333f61d836c6c3e2bbe5f86d/68747470733a2f2f75736573716c2e6769746875622e696f2f7475746f7269616c732f646f63732f696d616765732f72657374726963742d646f6d61696e732d312e706e67)

After that the domain for the static site needs to be entered. For the purposes of the tutorial the domain in this example is entered below. To add more than one domain you just need to seperate it by a comma.&#x20;

![](https://camo.githubusercontent.com/0befdd1e3219c982d29f0afe60e3c30e856046a7cb9f09e8ce86ad67404e1b52/68747470733a2f2f75736573716c2e6769746875622e696f2f7475746f7269616c732f646f63732f696d616765732f72657374726963742d646f6d61696e732d322e706e67)

### Step 4: Style Your Table (Optional)

The table is returned without any styling applied so in order to apply additional styles we just need to embed the styles applying them using the id we applied earlier to our sql-result. Take a look at the static site source to see how we applied the style below [here](https://github.com/usesql/tutorials/blob/main/static-sites/index.html#L6-L14).

```
<style>
    #sql-result > table {
        border: 1px solid black;
        padding: 4px;
    }
    #sql-result > table tr td {
        border-top: 1px solid black;
    }
</style>
```

### Completed: Enjoy Your Results

At this point you can take a look at the static site example we built through this tutorial [here](https://usesql.github.io/tutorials/static-sites/), and its source [here](https://github.com/usesql/tutorials/blob/main/static-sites/index.html).


# Share Data In Slack

{% embed url="<https://www.youtube.com/watch?v=fV161q1oLDE>" %}


# Show external query results in a Google Sheet

### Introduction

When working with data it's likely that you will want to not only retrieve data from your Google Sheets, but you may also want to surface data from external locations within your sheets. In this example, we will show you how to do so with an external csv file from Github that lists out the S\&P500 so that we can take advantage of Google Sheet's integration with Google Finance to get prices of the stocks in this index.

{% embed url="<https://docs.google.com/spreadsheets/u/4/d/1u0RkdS8KBwvCvSSIiS-xCN-P1RAfhgNRVewysHGIOrg/edit?usp=drivesdk>" %}

You can see the completed example above that we will be taking steps to replicate.

### Step 1: Creating The Query

The first step is to create the query that we want to submit to the api. For demo purposes here is the query we want for the sheet that retrieves a listing of ticker symbols.

```
SELECT Symbol
FROM "<https://raw.githubusercontent.com/dylanroy/sandp500-dataset/main/data.csv>"
```

The easiest way to build the query will be to copy, and paste this query within the OpenAPI documentation linked below.

{% embed url="<https://usesql.com/docs#/SQL/sql_select_sql_get>" %}

After providing your API key as a query parameter you will need to set the format to `csv`, and submit your query. Following the successful response you can copy the request URL that shows up. It should look like the following request, but with your own API key.

```
<https://usesql.com/sql?query=select%20Executive%2C%20Company%2C%20Since%20from%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fdylanroy%2Fceo-dataset%2Fmain%2Fdata.csv%22%20LIMIT%2010&format=json&key=YOUR_KEY>
```

**Note:** You may need to manually url encode the `"` to be `%22` in this demo if you don't end up using the OpenAPI.

### Step 2: Embedding Query Results

The next step will be to use the `IMPORTDATA` Google Sheet formula. Below is an example of this usage.

```
=IMPORTDATA("<http://usesql.com/sql?query=SELECT> Symbol FROM %22https://raw.githubusercontent.com/dylanroy/sandp500-dataset/main/data.csv%22&format=csv&key=&key=PM6qT1X9Z1CywydNlxlX")
```

### Step 3: Create Google Finance Formula

Now to complete our example the next step is to use another Google Sheet formula. We want to get the prices for the stock symbols listed in column A. So the next step would be pasting the following formula to B2, and then duplicate this formula for each row.

```
=GOOGLEFINANCE(A2)
```

At this stage you have successfully surfaced your external data in a Google Sheet. Take a look at the example below to see the end result.

{% embed url="<https://docs.google.com/spreadsheets/u/4/d/1u0RkdS8KBwvCvSSIiS-xCN-P1RAfhgNRVewysHGIOrg/edit?usp=drivesdk>" %}


# Query across a Google Sheet and a CSV file

### Introduction

When working with data it's likely that you will have the need to query across a couple of different sources. In this example, we will show you how to do this with a Google Sheet and a CSV file.

```
SELECT d.Symbol, c.Security, c.Executive, d.Price FROM (SELECT a.Symbol as Symbol, a.Security as Security, b.Executive as Executive
FROM "https://raw.githubusercontent.com/dylanroy/sandp500-dataset/main/data.csv" a 
JOIN "https://raw.githubusercontent.com/dylanroy/ceo-dataset/main/data.csv" b ON a.Security = b.Company) c
JOIN "https://docs.google.com/spreadsheets/d/1u0RkdS8KBwvCvSSIiS-xCN-P1RAfhgNRVewysHGIOrg" d ON c.Symbol = d.Symbol
```

A sample Query using public example datasets that can be tested in the demo interface [here](https://www.usesql.com/demo) or the OpenAPI documentation [here](https://usesql.com/docs).

To See a more complex example with a more simple query please see the tutorial linked below.

{% content-ref url="/pages/-MWg0KGW9Gt9qhZTIHyh" %}
[Show external query results in a Google Sheet](/tutorials/show-external-query-results-in-a-google-sheet)
{% endcontent-ref %}


# Securing Your Key

### Secure Your Key

It's pretty easy to secure our key. To add these restrictions we need to login, and navigate to our dashboard clicking on the domains link for the key that we want to add the restriction to shown below.&#x20;

![](https://camo.githubusercontent.com/350a06cb1eb026215b2bf87b402f91934085ea69333f61d836c6c3e2bbe5f86d/68747470733a2f2f75736573716c2e6769746875622e696f2f7475746f7269616c732f646f63732f696d616765732f72657374726963742d646f6d61696e732d312e706e67)

After that the domain for the static site needs to be entered. For the purposes of the tutorial the domain in this example is entered below. To add more than one domain you just need to seperate it by a comma.&#x20;

![](https://camo.githubusercontent.com/0befdd1e3219c982d29f0afe60e3c30e856046a7cb9f09e8ce86ad67404e1b52/68747470733a2f2f75736573716c2e6769746875622e696f2f7475746f7269616c732f646f63732f696d616765732f72657374726963742d646f6d61696e732d322e706e67)


# Querying Airtable

{% embed url="<https://www.youtube.com/watch?v=owgovTNIxmU>" %}


# Integrate With ProcFu

It's pretty easy to surface your query results in ProcFu if you are looking to do so. Below are the steps you will need to take.

### Step 1: Create A New Screen

The first thing you will want to do when integrating UseSQL with one of your Profu Apps is to create a new screen of type "Text Information". After in the section where is says markdown text you will need to make sure to add an html element, which is valid in the markdown text field, with an identifier. In this example we will name it "sql-result".

![](/files/-MWjLPI9Ffts4poYVE68)

### Step 2: Update Screen Behaviors

Now that we have a container to write our query results to. We can paste in some Javascript in the "On Render (Javascript)" section under the "Behaviors" tab. Below is some JavaScript you can copy and paste or replace with your own query, and a screenshot of the location to paste it into. Don't forget you can always build your queries in the sandbox at <https://www.usesql.com/sandbox>.

```
fetch('https://usesql.com/sql?query=SELECT%20a.Symbol%2C%20a.Security%2C%20b.Executive%20%0AFROM%20%22https%3A%2F%2Fen.wikipedia.org%2Fwiki%2FList_of_S%2526P_500_companies%22%20a%20%0AJOIN%20%22https%3A%2F%2Fraw.githubusercontent.com%2Fdylanroy%2Fceo-dataset%2Fmain%2Fdata.csv%22%20b%20ON%20a.Security%20%3D%20b.Company&format=html&key={YOUR_API_KEY}')
  .then(response => response.text())
  .then(data => document.getElementById('sql-result').innerHTML = data);
```

You will take the script above, and add your API key, and place it in the  "On Render (Javascript)" section as shown below.

![](/files/-MWjLdQS8pT1dQYE6Lxd)

### Step 3: Save Your Results And Enjoy!

Save your results and visit your ProFu link.

![](/files/-MWjL3LP8s3dDOQyOZ4u)

{% embed url="<https://procfu.com/usesql>" %}


# Integrate with a private Google Sheet

If you want to query a private Google Sheet you just need to do a couple of things to enable this. These steps are outlined below. If at any time you have an issue following these steps, please reach out to <support@usesql.com>.

### Step 1: Add your Google Sheet's id to your key

The first step is to attach your Google Sheet's id to one of your API keys. Login to your dashboard to do this, and click on the button labeled with "Sheets".

![](/files/-MXY8axJtRGxYHGREljq)

Once you have clicked on the button you should see a screen as shown below where you can find instructions for your next steps, and where you can add your Googles Sheet id.&#x20;

![](/files/-MXY4TfHYcEzpESliiAm)

You can find the id in the url for the Google sheet. When viewing the sheet it will follow <https://docs.google.com/spreadsheets/d/> and precede /edit/ as shown below.

![](/files/-MXY6p6S9XroBp-RzOVn)

### Step 2: Give the UseSQL service account view permissions to your sheet

The next step is to take the service account <googlesheets@usesql.iam.gserviceaccount.com> and give it view access to the sheet you are looking to query, by clicking on the sheet's share button as shown below.

![](/files/-MXY7GOXG1RJZNWJBxPa)

When adding you will also want to disable the "Notify people" checkbox otherwise you will get notified of the fact that the service account cannot receive emails.

![](/files/-MXY7KrH-IA4aWas6dfn)

### Step 3: Start querying your sheet

At this point, you are ready to query your private Google Sheet, and as many other supported sources as you please through SQL.


# Updating Google Sheets

*Note: Currently, only inserts are supported so we only can append to existing sheets.*

### Step 1: Give A Key Permissions to your sheet

![](/files/-MXY8axJtRGxYHGREljq)

![](/files/-MXY4TfHYcEzpESliiAm)

### Step 2: Give the service account edit permissions to your sheet

After that, the last step is to give UseSQL's service account, `googlesheets@usesql.iam.gserviceaccount.com`, editor access to your Google Sheet.

![](/files/-MYlamWsVRzXQjcudWZ9)

### Step 3: Start inserting your data

After you have done those two things you are ready to query your Google Sheet. UseSQL uses the SQLite query syntax so it may be useful to take a look at their [INSERT](https://sqlite.org/lang_insert.html) documentation. Below is an example of inserting three values into the category column. So for a Google Sheet like the following.

![](/files/-MYlYahGvKxuaZBZ3RNJ)

We could append additional categories as shown below.

`INSERT INTO "https://docs.google.com/spreadsheets/d/11IYmdNXfaDzdL2mErTqMjE_6NqEqpKxw6YPdXiyCMZ2/edit#gid=337090280" (category) VALUES ('Horror'), ('Sci-Fi'), ('Thriller')`

If you had an API key that has access to the following sheet you would be be able to trigger the query that you can view in the demo sandbox below.

[\[Sandbox Example\]](https://www.usesql.com/demo?query=INSERT%20INTO%20%22https%3A%2F%2Fdocs.google.com%2Fspreadsheets%2Fd%2F11IYmdNXfaDzdL2mErTqMjE_6NqEqpKxw6YPdXiyCMZ2%2Fedit%23gid%3D337090280%22%20\(category\)%20VALUES%20\(%27Horror%27\)%2C%20\(%27Sci-Fi%27\)%2C%20\(%27Thriller%27\)\&format=html)


# Retrieving data from tables on a web page

In order to query tables within web pages, you have a number of options. The examples illustrated below are querying some sample tables on [this page](https://www.usesql.com/samples/tables). Each example links back to the demo sandbox for you to try yourself. By default, the first table on the page is retrieved, but you can query for specific tables within a page with four different methods. So if a web page only has one table you can simply supply the web page's URL as shown below.

&#x20; `SELECT * FROM "https://www.usesql.com/samples/tables"` [\[Example In Sandbox\]](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fwww.usesql.com%2Fsamples%2Ftables%22\&format=html)

### Method 1: Table Index

The easiest way to explore a page likely will be with this method. This is a zero-based index so the first table will be 0. You just need to append a hashtag, and the index enclosed with square brackets. Below is an example using this method.

`SELECT * FROM "https://www.usesql.com/samples/tables#[0]"` [\[Example In Sandbox\]](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fwww.usesql.com%2Fsamples%2Ftables%23%5B0%5D%22\&format=html)

Here is another example of getting the second table on the webpage.

`SELECT * FROM "https://www.usesql.com/samples/tables#[1]"` [\[Example In Sandbox\]](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fwww.usesql.com%2Fsamples%2Ftables%23%5B1%5D%22\&format=html)

### Method 2: Table Class

You can also select a table using its class attribute as defined in its html. In order to this you just need to append a hashtag, and a period preceding the class name. Below is an example using this method.

`SELECT * FROM "https://www.usesql.com/samples/tables#.sample-table"` [\[Example In Sandbox\]](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fwww.usesql.com%2Fsamples%2Ftables%23.sample-table%22\&format=html)

This method can be combined with using the table index so if there are two tables with the class `sample-table` you would use the query below.

`SELECT * FROM "https://www.usesql.com/samples/tables#.sample-table[1]"` [\[Example In Sandbox\]](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fwww.usesql.com%2Fsamples%2Ftables%23.sample-table%5B1%5D%22\&format=html)

### Method 3: Table String Match

Another way to choose a table that you want to query is to append #+ to the end of the website URL with a string that you see in the table.

`SELECT * FROM "https://www.usesql.com/samples/tables#+Weekend"` [\[Example In Sandbox\]](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fwww.usesql.com%2Fsamples%2Ftables%23%2BWeekend%22\&format=html)

Like with the html class attribute selector this method can be combined with selecting a table index as more than one table may have the string that's being supplied. The example below illustrates this.

`SELECT * FROM "https://www.usesql.com/samples/tables#+Title[1]"` [\[Example In Sandbox\]](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fwww.usesql.com%2Fsamples%2Ftables%23%2BTitle%5B1%5D%22\&format=html)

### Method 4: Table Id

If you own the page the most reliable way to query a specific table is likely to be this method. You can use a table's html attribute id to indicate to UseSQL which table you want to query. An example can be shown for a table that has an `id="top-titles"`.&#x20;

`SELECT * FROM "https://www.usesql.com/samples/tables#top-titles"` [\[Example In Sandbox\]](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fwww.usesql.com%2Fsamples%2Ftables%23top-titles%22\&format=html)


# Displaying reports in Google Sheets from MySQL

A common use case that UseSQL can serve is to display data and build reports in Google Sheets. The API has the ability to query MySQL tables and views, and soon the ability to provide queries as a source. This tutorial will demonstrate how to surface results from a table or view into a Google Sheet.

*Note: When doing this you are exposing your credentials within the Google Sheet so please use a protected Sheet and read-only credentials.*

### Step 1: Build your query string

To create a MySQL source to be queried it's pretty simple. You just need to provide the connection string with the table or view you want to query. The query string below shows how this should look:

`mysql://username:password@host:port/database.table`

### Step 2: Add your query string to your table

After that, you can add that as a source to query, and set the return format to be csv. For demonstration purposes, we will keep this simple.

`SELECT * FROM "mysql://username:password@host:port/database.table"` [\[Example In Sandbox\]](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22mysql%3A%2F%2Fusername%3Apassword%40host%3Aport%2Fdatabase.table%22\&format=csv)

### Step 3: Embed results in your Google Sheet

To embed your results you just need to wrap your query from above in the `=IMPORTDATA` function.

![](/files/-MYpVw_XLauDBBXpMres)


# Querying StackBy Tables

### Step 1: Find The StackBy Table You Want To Include

Create or find a table that you would like to query, and copy it's url from the browser.

![](/files/-MZyVjBf-l0DMUXr7glQ)

### Step 2: Retrieve Your StackBy API Key

Login to your StackBy account, and navigate to your Account page.

![](/files/-MZyVwbY3SOMD-RITLX_)

Once on the account page if you havent created an API Key click the Create API Key button.

![](/files/-MZyW0T6rYLAsp1PZWhZ)

Once you have this key, make it visible, and save it somewhere for the next step where we build our query.

![](/files/-MZyW9hGxqU3yxNH9mpp)

### Step 3: Build Your SQL Query

After this you just need to add the url as the table you want to query from with the api key provided as a query parameter. An example is shown below along with a link to the query in the sandbox.

`SELECT * FROM "https://stackby.com/stack/stJMXZMzvH293NHq3S/tbl1575000948100df97c5?api-key={YOUR-KEY}"`[\[ sandbox \]](https://www.usesql.com/demo?query=SELECT%20*%20FROM%20%22https%3A%2F%2Fstackby.com%2Fstack%2FstJMXZMzvH293NHq3S%2Ftbl1575000948100df97c5%3Fapi-key%3DR8Nt2XYfnfO534O3%22\&format=html)


# Changelog

## 15.0.0 - 2042-12-03

### Added

* A StackBy integration which allows a StackBy table to be a source for a query.
* An example for querying a StackBy table.

### Fixed

* Removed humans, they weren't doing fine with animals.

### Changed

* Animals are now super cute, all of them.

## 14.0.0 - 2042-10-06

### Added

* Introduced animals into the world, we believe they're going to be a neat addition.